Flutter 网络请求与数据处理：从基础到单例封装

Flutter 网络请求与数据处理：从基础到单例封装

在 Flutter 开发中，网络请求是一个非常常见的需求，比如获取 API 数据、上传文件、处理分页加载等。为了高效地处理网络请求和数据管理，我们需要选择合适的工具并进行合理的封装。

本篇博客将详细介绍 Flutter 中网络请求的基础知识、常用库（如 http 和 dio），并最终实现一个单例模式的网络请求封装，帮助你在项目中高效管理网络请求。

---

1. 网络请求的基础知识

1.1 HTTP 请求的基本类型

1. GET：从服务器获取数据。
2. POST：向服务器发送数据。
3. PUT：更新服务器上的数据。
4. DELETE：删除服务器上的数据。

1.2 常用的网络请求库

1. http ：
   • Flutter 官方提供的轻量级 HTTP 客户端。
   • 适合简单的网络请求。
2. dio ：
   • 功能强大的第三方库，支持拦截器、文件上传下载、请求取消等。
   • 适合复杂的网络请求场景。

---

2. 使用 http 进行网络请求

2.1 安装 http

在 pubspec.yaml 中添加依赖：

dependencies:
  http: ^0.15.0

运行以下命令安装依赖：

flutter pub get

2.2 基本用法

GET 请求

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

void fetchData() async {
  final url = Uri.parse("https://jsonplaceholder.typicode.com/posts");
  final response = await http.get(url);

  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    print("数据加载成功：$data");
  } else {
    print("请求失败，状态码：${response.statusCode}");
  }
}

void main() {
  fetchData();
}

POST 请求

void postData() async {
  final url = Uri.parse("https://jsonplaceholder.typicode.com/posts");
  final response = await http.post(
    url,
    headers: {"Content-Type": "application/json"},
    body: json.encode({"title": "Flutter", "body": "Hello World", "userId": 1}),
  );

  if (response.statusCode == 201) {
    final data = json.decode(response.body);
    print("数据提交成功：$data");
  } else {
    print("请求失败，状态码：${response.statusCode}");
  }
}

void main() {
  postData();
}

---

3. 使用 dio 进行网络请求

3.1 安装 dio

在 pubspec.yaml 中添加依赖：

dependencies:
  dio: ^5.0.0

运行以下命令安装依赖：

flutter pub get

3.2 基本用法

GET 请求

import 'package:dio/dio.dart';

void fetchData() async {
  final dio = Dio();
  final response = await dio.get("https://jsonplaceholder.typicode.com/posts");

  if (response.statusCode == 200) {
    print("数据加载成功：${response.data}");
  } else {
    print("请求失败，状态码：${response.statusCode}");
  }
}

void main() {
  fetchData();
}

POST 请求

void postData() async {
  final dio = Dio();
  final response = await dio.post(
    "https://jsonplaceholder.typicode.com/posts",
    data: {"title": "Flutter", "body": "Hello World", "userId": 1},
  );

  if (response.statusCode == 201) {
    print("数据提交成功：${response.data}");
  } else {
    print("请求失败，状态码：${response.statusCode}");
  }
}

void main() {
  postData();
}

---

3.3 使用拦截器

dio 提供了强大的拦截器功能，可以在请求前后进行统一处理。

示例：添加拦截器

void fetchDataWithInterceptor() async {
  final dio = Dio();

  // 添加拦截器
  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (options, handler) {
      print("请求开始：${options.uri}");
      return handler.next(options);
    },
    onResponse: (response, handler) {
      print("请求成功：${response.data}");
      return handler.next(response);
    },
    onError: (error, handler) {
      print("请求失败：${error.message}");
      return handler.next(error);
    },
  ));

  final response = await dio.get("https://jsonplaceholder.typicode.com/posts");
  print(response.data);
}

void main() {
  fetchDataWithInterceptor();
}

---

4. 单例模式封装网络请求

在实际项目中，网络请求通常需要统一管理，比如设置基础 URL、添加拦截器、处理错误等。通过单例模式封装网络请求，可以提高代码的复用性和可维护性。

4.1 单例封装 dio

封装代码

import 'package:dio/dio.dart';

class DioClient {
  // 单例模式
  static final DioClient _instance = DioClient._internal();
  factory DioClient() => _instance;

  late Dio _dio;

  DioClient._internal() {
    _dio = Dio(BaseOptions(
      baseUrl: "https://jsonplaceholder.typicode.com",
      connectTimeout: const Duration(seconds: 10),
      receiveTimeout: const Duration(seconds: 10),
      headers: {"Content-Type": "application/json"},
    ));

    // 添加拦截器
    _dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) {
        print("请求开始：${options.uri}");
        return handler.next(options);
      },
      onResponse: (response, handler) {
        print("请求成功：${response.data}");
        return handler.next(response);
      },
      onError: (error, handler) {
        print("请求失败：${error.message}");
        return handler.next(error);
      },
    ));
  }

  // GET 请求
  Future<Response> get(String path, {Map<String, dynamic>? queryParameters}) async {
    return await _dio.get(path, queryParameters: queryParameters);
  }

  // POST 请求
  Future<Response> post(String path, {Map<String, dynamic>? data}) async {
    return await _dio.post(path, data: data);
  }

  // PUT 请求
  Future<Response> put(String path, {Map<String, dynamic>? data}) async {
    return await _dio.put(path, data: data);
  }

  // DELETE 请求
  Future<Response> delete(String path, {Map<String, dynamic>? data}) async {
    return await _dio.delete(path, data: data);
  }
}

---

4.2 使用封装的 DioClient

GET 请求

void fetchData() async {
  final dioClient = DioClient();
  final response = await dioClient.get("/posts");

  if (response.statusCode == 200) {
    print("数据加载成功：${response.data}");
  } else {
    print("请求失败，状态码：${response.statusCode}");
  }
}

void main() {
  fetchData();
}

POST 请求

void postData() async {
  final dioClient = DioClient();
  final response = await dioClient.post(
    "/posts",
    data: {"title": "Flutter", "body": "Hello World", "userId": 1},
  );

  if (response.statusCode == 201) {
    print("数据提交成功：${response.data}");
  } else {
    print("请求失败，状态码：${response.statusCode}");
  }
}

void main() {
  postData();
}

---

5. 总结

5.1 http 和 dio 的对比

特性	http	dio
功能	轻量级，适合简单请求	功能强大，支持拦截器、文件上传等
学习曲线	低	中
扩展性	较低	高
适用场景	小型项目	中型和大型项目

5.2 实践建议

1. 小型项目 ：
   • 使用 http，简单易用。
2. 中型和大型项目 ：
   • 使用 dio，并通过单例模式封装，统一管理网络请求。