内容
description bug_report

从互联网获取数据

内容

大多数应用程序都需要从互联网获取数据。幸运的是，Dart 和 Flutter 提供了工具，例如 http 包，用于执行此类工作。

此食谱使用以下步骤

  1. 添加 http 包。
  2. 使用 http 包发出网络请求。
  3. 将响应转换为自定义 Dart 对象。
  4. 使用 Flutter 获取和显示数据。

1. 添加 http 包

#

该 http 包提供了从互联网获取数据的最简单方法。

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

flutter pub add http

导入 http 包。

dart
import 'package:http/http.dart' as http;

如果您要部署到 Android，请编辑您的 AndroidManifest.xml 文件以添加 Internet 权限。

xml
<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

同样，如果您要部署到 macOS，请编辑您的 macos/Runner/DebugProfile.entitlements 和 macos/Runner/Release.entitlements 文件以包含网络客户端权利。

xml
<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>

2. 发出网络请求

#

此食谱介绍了如何使用 JSONPlaceholder 使用 http.get() 方法获取示例专辑。

dart
Future<http.Response> fetchAlbum() {
  return http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
}

http.get() 方法返回一个包含 Response 的 Future。

  • Future 是一个用于处理异步操作的核心 Dart 类。Future 对象表示将来某个时间将可用的潜在值或错误。
  • http.Response 类包含从成功的 http 调用中接收的数据。

3. 将响应转换为自定义 Dart 对象

#

虽然发出网络请求很容易，但使用原始 Future<http.Response> 并不十分方便。为了让您的生活更轻松，请将 http.Response 转换为 Dart 对象。

创建一个名为Album的类

#

首先，创建一个名为Album的类，用于存储来自网络请求的数据。它包含一个工厂构造函数，用于从 JSON 创建一个Album对象。

使用模式匹配转换 JSON 只是其中一种选择。有关更多信息，请参阅关于JSON 和序列化的完整文章。

dart
class Album {
  final int userId;
  final int id;
  final String title;

  const Album({
    required this.userId,
    required this.id,
    required this.title,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {
        'userId': int userId,
        'id': int id,
        'title': String title,
      } =>
        Album(
          userId: userId,
          id: id,
          title: title,
        ),
      _ => throw const FormatException('Failed to load album.'),
    };
  }
}

将http.Response转换为Album

#

现在，使用以下步骤更新fetchAlbum()函数，使其返回一个Future<Album>

  1. 使用dart:convert包将响应主体转换为 JSON Map。
  2. 如果服务器返回状态码为 200 的 OK 响应，则使用fromJson()工厂方法将 JSON Map 转换为Album。
  3. 如果服务器没有返回状态码为 200 的 OK 响应，则抛出异常。（即使在服务器返回“404 Not Found”响应的情况下，也要抛出异常。不要返回null。这在检查snapshot中的数据时很重要，如下所示。）
dart
Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

太棒了！现在你已经拥有了一个从互联网获取专辑的函数。

4. 获取数据

#

在initState()或didChangeDependencies()方法中调用fetchAlbum()方法。

initState()方法只会被调用一次，之后不会再被调用。如果你想在响应InheritedWidget更改时重新加载 API，将调用放入didChangeDependencies()方法中。有关更多详细信息，请参阅State。

dart
class _MyAppState extends State<MyApp> {
  late Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }
  // ···
}

此 Future 将在下一步中使用。

5. 显示数据

#

要将数据显示在屏幕上，请使用FutureBuilder小部件。FutureBuilder小部件随 Flutter 提供，可以轻松处理异步数据源。

你必须提供两个参数

  1. 要处理的Future。在本例中，是fetchAlbum()函数返回的 future。
  2. 一个builder函数，它告诉 Flutter 根据Future的状态（加载、成功或错误）渲染什么。

请注意，snapshot.hasData仅在快照包含非空数据值时才返回true。

由于fetchAlbum只能返回非空值，因此即使在服务器响应为“404 Not Found”的情况下，该函数也应该抛出异常。抛出异常会将snapshot.hasError设置为true，这可用于显示错误消息。

否则，将显示加载指示器。

dart
FutureBuilder<Album>(
  future: futureAlbum,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!.title);
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }

    // By default, show a loading spinner.
    return const CircularProgressIndicator();
  },
)

为什么在 initState() 中调用 fetchAlbum()？

#

虽然很方便，但不建议将 API 调用放在build()方法中。

Flutter 每次需要更改视图中的任何内容时都会调用build()方法，而这种情况发生的频率令人惊讶地高。如果将fetchAlbum()方法放在build()中，则会在每次重建时重复调用该方法，导致应用程序速度变慢。

将fetchAlbum()的结果存储在状态变量中可确保Future仅执行一次，然后缓存以供后续重建使用。

测试

#

有关如何测试此功能的信息，请参阅以下食谱

完整示例

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

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

Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

class Album {
  final int userId;
  final int id;
  final String title;

  const Album({
    required this.userId,
    required this.id,
    required this.title,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {
        'userId': int userId,
        'id': int id,
        'title': String title,
      } =>
        Album(
          userId: userId,
          id: id,
          title: title,
        ),
      _ => throw const FormatException('Failed to load album.'),
    };
  }
}

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Album>(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!.title);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }

              // By default, show a loading spinner.
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}