内容
description bug_report

在后台解析 JSON

内容

默认情况下，Dart 应用程序在其单个线程上执行所有工作。在许多情况下，这种模型简化了编码，并且速度足够快，不会导致应用程序性能下降或动画卡顿（通常称为“卡顿”）。

但是，您可能需要执行昂贵的计算，例如解析非常大的 JSON 文档。如果此工作花费超过 16 毫秒，您的用户将体验到卡顿。

为了避免卡顿，您需要在后台执行此类昂贵的计算。在 Android 上，这意味着在不同的线程上调度工作。在 Flutter 中，您可以使用单独的 隔离区。此食谱使用以下步骤

  1. 添加 http 包。
  2. 使用 http 包发出网络请求。
  3. 将响应转换为照片列表。
  4. 将此工作移至单独的隔离区。

1. 添加 http 包

#

首先，将 http 包添加到您的项目中。http 包使执行网络请求（例如从 JSON 端点获取数据）变得更加容易。

要将 http 包添加为依赖项，请运行 flutter pub add

flutter pub add http

2. 发出网络请求

#

此示例介绍了如何使用 http.get() 方法从 JSONPlaceholder REST API 获取包含 5000 个照片对象的 JSON 文档列表。

dart
Future<http.Response> fetchPhotos(http.Client client) async {
  return client.get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));
}

3. 解析并将 JSON 转换为照片列表

#

接下来，按照 从互联网获取数据 食谱中的指导，将 http.Response 转换为 Dart 对象列表。这使得数据更容易处理。

创建一个 Photo 类

#

首先，创建一个包含照片数据的 Photo 类。包含一个 fromJson() 工厂方法，以便可以轻松地从 JSON 对象创建 Photo。

dart
class Photo {
  final int albumId;
  final int id;
  final String title;
  final String url;
  final String thumbnailUrl;

  const Photo({
    required this.albumId,
    required this.id,
    required this.title,
    required this.url,
    required this.thumbnailUrl,
  });

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      albumId: json['albumId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      url: json['url'] as String,
      thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }
}

将响应转换为照片列表

#

现在，使用以下说明更新 fetchPhotos() 函数，使其返回 Future<List<Photo>>

  1. 创建一个 parsePhotos() 函数，将响应主体转换为 List<Photo>。
  2. 在 fetchPhotos() 函数中使用 parsePhotos() 函数。
dart
// A function that converts a response body into a List<Photo>.
List<Photo> parsePhotos(String responseBody) {
  final parsed =
      (jsonDecode(responseBody) as List).cast<Map<String, dynamic>>();

  return parsed.map<Photo>((json) => Photo.fromJson(json)).toList();
}

Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client
      .get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));

  // Synchronously run parsePhotos in the main isolate.
  return parsePhotos(response.body);
}

4. 将此工作移至单独的隔离区

#

如果您在速度较慢的设备上运行 fetchPhotos() 函数，您可能会注意到应用程序在解析和转换 JSON 时短暂冻结。这是卡顿，您需要消除它。

您可以通过使用 Flutter 提供的 compute() 函数将解析和转换移到后台隔离来消除卡顿。compute() 函数在后台隔离中运行昂贵的函数并返回结果。在本例中，在后台运行 parsePhotos() 函数。

dart
Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client
      .get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));

  // Use the compute function to run parsePhotos in a separate isolate.
  return compute(parsePhotos, response.body);
}

关于使用隔离区的注意事项

#

隔离通过相互传递消息进行通信。这些消息可以是原始值，例如 null、num、bool、double 或 String，也可以是简单对象，例如本例中的 List<Photo>。

如果您尝试在隔离之间传递更复杂的对象（例如 Future 或 http.Response），可能会遇到错误。

作为替代解决方案，请查看 worker_manager 或 workmanager 包以进行后台处理。

完整示例

#
dart
import 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client
      .get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));

  // Use the compute function to run parsePhotos in a separate isolate.
  return compute(parsePhotos, response.body);
}

// A function that converts a response body into a List<Photo>.
List<Photo> parsePhotos(String responseBody) {
  final parsed =
      (jsonDecode(responseBody) as List).cast<Map<String, dynamic>>();

  return parsed.map<Photo>((json) => Photo.fromJson(json)).toList();
}

class Photo {
  final int albumId;
  final int id;
  final String title;
  final String url;
  final String thumbnailUrl;

  const Photo({
    required this.albumId,
    required this.id,
    required this.title,
    required this.url,
    required this.thumbnailUrl,
  });

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      albumId: json['albumId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      url: json['url'] as String,
      thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }
}

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Isolate Demo';

    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<List<Photo>> futurePhotos;

  @override
  void initState() {
    super.initState();
    futurePhotos = fetchPhotos(http.Client());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder<List<Photo>>(
        future: futurePhotos,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Center(
              child: Text('An error has occurred!'),
            );
          } else if (snapshot.hasData) {
            return PhotosList(photos: snapshot.data!);
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

class PhotosList extends StatelessWidget {
  const PhotosList({super.key, required this.photos});

  final List<Photo> photos;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: photos.length,
      itemBuilder: (context, index) {
        return Image.network(photos[index].thumbnailUrl);
      },
    );
  }
}

Isolate demo