在现代应用程序开发中，网络请求是不可或缺的一部分。Flutter 提供了强大的库来处理网络请求，其中最常用的就是 http 包。本章将详细介绍如何使用 http 包进行基本的网络请求、错误处理以及如何管理状态。
安装 http 包
首先，你需要在你的项目中添加 http 包。打开 pubspec.yaml 文件，并在 dependencies 下添加以下依赖：
dependencies:
flutter:
sdk: flutter
http: ^0.13.4 # 根据最新版本进行调整保存文件后，运行 flutter pub get 来获取依赖包。
发送 GET 请求
GET 请求是最常见的请求类型之一，用于从服务器获取数据。下面是一个简单的例子，演示如何使用 http 包发送 GET 请求并处理响应。
示例代码
// www.javascriptcn.com code example
import 'package:http/http.dart' as http;
import 'dart:convert';
Future<void> fetchAlbum() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
if (response.statusCode == 200) {
// 请求成功，解析 JSON 数据
var data = json.decode(response.body);
print(data);
} else {
// 请求失败，抛出异常
throw Exception('Failed to load album');
}
}在这个示例中，我们通过 Uri.parse 方法创建了一个 URL 对象，并通过 http.get 方法发送 GET 请求。如果响应的状态码为 200，则表示请求成功，我们可以进一步解析返回的数据。否则，我们抛出一个异常。
发送 POST 请求
除了 GET 请求外，POST 请求也非常重要，它通常用于向服务器提交数据。下面是如何使用 http 包发送 POST 请求的例子。
示例代码
// www.javascriptcn.com code example
import 'package:http/http.dart' as http;
import 'dart:convert';
Future<void> createAlbum(String title) async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(<String, String>{
'title': title,
}),
);
if (response.statusCode == 201) {
// 请求成功，解析 JSON 数据
var data = json.decode(response.body);
print(data);
} else {
// 请求失败，抛出异常
throw Exception('Failed to create album');
}
}在这个例子中，我们使用 http.post 方法发送 POST 请求。注意，我们设置了 Content-Type 头，并且将请求体编码为 JSON 字符串。
错误处理
在网络请求过程中，可能会遇到各种错误。因此，错误处理是非常重要的。我们可以使用 try-catch 结构来捕获和处理这些错误。
示例代码
try {
await fetchAlbum();
} catch (e) {
print('Error: $e');
}在这个例子中，我们将 fetchAlbum() 函数包裹在一个 try-catch 块中，以便捕捉任何可能发生的异常，并打印出错误信息。
使用 FutureBuilder
在 Flutter 中，我们经常需要在 UI 中显示异步加载的数据。为了实现这一点，我们可以使用 FutureBuilder 小部件。FutureBuilder 会根据未来值的状态（加载中、完成或失败）自动更新 UI。
示例代码
// www.javascriptcn.com code example
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Albums")),
body: AlbumList(),
),
);
}
}
class AlbumList extends StatefulWidget {
@override
_AlbumListState createState() => _AlbumListState();
}
class _AlbumListState extends State<AlbumList> {
Future<List<dynamic>> fetchAlbums() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums'));
if (response.statusCode == 200) {
return json.decode(response.body);
} else {
throw Exception('Failed to load albums');
}
}
@override
Widget build(BuildContext context) {
return FutureBuilder<List<dynamic>>(
future: fetchAlbums(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data![index]['title']),
);
},
);
} else if (snapshot.hasError) {
return Center(child: Text("${snapshot.error}"));
}
// 显示加载指示器
return Center(child: CircularProgressIndicator());
},
);
}
}在这个例子中，我们定义了一个 _AlbumListState 类，该类包含一个 FutureBuilder，用于异步获取专辑列表并在界面上显示它们。当数据加载完成后，ListView.builder 会被用来构建列表项。
总结
本章详细介绍了如何在 Flutter 应用程序中使用 http 包进行网络请求，包括发送 GET 和 POST 请求，处理错误以及使用 FutureBuilder 小部件展示异步加载的数据。掌握这些基础知识对于构建功能丰富的 Flutter 应用程序至关重要。