Flutter 中如何进行网络请求？

推荐答案

在 Flutter 中进行网络请求，推荐使用 http 包或 Dio 包。以下是使用 http 包进行 GET 请求的示例代码：

// www.javascriptcn.com code example
import 'package:http/http.dart' as http;
import 'dart:convert';

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

  if (response.statusCode == 200) {
    // 请求成功，解析返回的 JSON 数据
    Map<String, dynamic> data = jsonDecode(response.body);
    print(data);
  } else {
    // 请求失败，处理错误
    print('请求失败，状态码: ${response.statusCode}');
  }
}

本题详细解读

1. 使用 http 包进行网络请求

http 是 Flutter 官方推荐的网络请求库，简单易用。它支持常见的 HTTP 方法，如 GET、POST、PUT、DELETE 等。

1.1 安装 http 包

在 pubspec.yaml 文件中添加依赖：

dependencies:
  http: ^0.13.3

然后运行 flutter pub get 安装依赖。

1.2 发起 GET 请求

使用 http.get() 方法发起 GET 请求，并通过 Uri.parse() 方法将 URL 字符串转换为 Uri 对象。

final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

1.3 处理响应

通过 response.statusCode 判断请求是否成功，如果状态码为 200，表示请求成功，可以通过 jsonDecode() 方法解析返回的 JSON 数据。

if (response.statusCode == 200) {
  Map<String, dynamic> data = jsonDecode(response.body);
  print(data);
} else {
  print('请求失败，状态码: ${response.statusCode}');
}

2. 使用 Dio 包进行网络请求

Dio 是一个功能强大的第三方网络请求库，支持拦截器、请求取消、文件上传/下载等功能。

2.1 安装 Dio 包

在 pubspec.yaml 文件中添加依赖：

dependencies:
  dio: ^4.0.0

然后运行 flutter pub get 安装依赖。

2.2 发起 GET 请求

使用 Dio 发起 GET 请求的示例代码：

// www.javascriptcn.com code example
import 'package:dio/dio.dart';

Future<void> fetchData() async {
  Dio dio = Dio();
  final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    print(response.data);
  } else {
    print('请求失败，状态码: ${response.statusCode}');
  }
}

2.3 处理响应

Dio 的响应数据已经自动解析为 Map<String, dynamic> 类型，可以直接使用 response.data 获取数据。

if (response.statusCode == 200) {
  print(response.data);
} else {
  print('请求失败，状态码: ${response.statusCode}');
}

3. 选择 http 还是 Dio

• http：适合简单的网络请求场景，轻量级，易于上手。
• Dio：适合复杂的网络请求场景，功能丰富，支持拦截器、请求取消等高级功能。

根据项目需求选择合适的网络请求库。