从互联网获取数据
如何使用 http 包通过互联网获取数据。
对于大多数应用程序来说，从互联网获取数据是必要的。幸运的是，Dart 和 Flutter 提供了诸如 http 包之类的工具来完成这项工作。
本示例将采取以下步骤
- 添加 `http` 包。
- 使用
http包发起网络请求。 - 将响应转换为自定义 Dart 对象。
- 使用 Flutter 获取和显示数据。
1. 添加 `http` 包
#http 包提供了从互联网获取数据的最简单方法。
要将 http 包添加为依赖项，请运行 flutter pub add。
flutter pub add http
导入 http 包。
import 'package:http/http.dart' as http;
如果你部署到 Android，请编辑 `AndroidManifest.xml` 文件以添加互联网权限。
<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />
同样，如果你部署到 macOS，请编辑 `macos/Runner/DebugProfile.entitlements` 和 `macos/Runner/Release.entitlements` 文件以包含网络客户端授权。
<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>
2. 发起网络请求
#本教程介绍如何使用 http 包从 JSONPlaceholder 获取一个示例专辑，并使用 http.get() 方法。
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 和序列化 的完整文章。
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>
- 使用 `dart:convert` 包将响应体转换为 JSON `Map`。
- 如果服务器返回一个状态码为 200 的 OK 响应，则使用
fromJson()工厂方法将 JSONMap转换为一个Album。 - 如果服务器没有返回一个状态码为 200 的 OK 响应，则抛出一个异常。（即使在服务器响应为“404 Not Found”的情况下，也应该抛出一个异常。不要返回
null。这在检查snapshot中的数据时非常重要，如下所示。）
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。
class _MyAppState extends State<MyApp> {
late Future<Album> futureAlbum;
@override
void initState() {
super.initState();
futureAlbum = fetchAlbum();
}
// ···
}
这个 Future 在下一步中会被使用。
5. 显示数据
#要在屏幕上显示数据，请使用 FutureBuilder 组件。FutureBuilder 组件随 Flutter 一起提供，可以轻松地处理异步数据源。
您必须提供两个参数
- 您想要处理的
Future。在这种情况下，是fetchAlbum()函数返回的 future。 - 一个 `builder` 函数，它根据 `Future` 的状态（加载中、成功或错误）告诉 Flutter 要渲染什么。
请注意，snapshot.hasData 仅在快照包含非空数据值时才返回 true。
由于 fetchAlbum 只能返回非空值，因此即使在服务器响应为“404 Not Found”的情况下，该函数也应该抛出一个异常。抛出异常会将 snapshot.hasError 设置为 true，这可用于显示错误消息。
否则，将显示加载指示器。
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 只执行一次，然后缓存以供后续重建使用。
测试
#有关如何测试此功能的更多信息，请参阅以下教程
完整示例
#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();
},
),
),
),
);
}
}