返回

网络请求封装：简化 Flutter 应用开发

前端

在 Flutter 应用开发中，网络请求是一个常见且至关重要的功能。本文将深入探讨如何通过对 dio 进行二次封装，一步步实现网络请求封装。这种封装方式可以简化网络请求流程，使开发人员能够轻松处理网络请求，同时统一数据解析、异常处理、请求拦截、日志打印和 loading 显示。

封装步骤

1. 创建 dio 实例

import 'package:dio/dio.dart';

class Network {
  static final Dio _dio = Dio();
}

2. 配置网络请求

在创建 dio 实例后，我们可以配置网络请求参数，如超时时间、请求头等。

Network._dio.options.connectTimeout = 10000; // 连接超时时间（毫秒）
Network._dio.options.receiveTimeout = 10000; // 接收超时时间（毫秒）
Network._dio.options.headers = {
  'Content-Type': 'application/json', // 请求头
};

3. 数据解析

为了简化数据解析，我们可以使用 json_serializable 包。首先，在模型类中添加 @JsonSerializable() 注解，然后生成对应的 _$ModelName.dart 文件。

// user.dart
import 'package:json_annotation/json_annotation.dart';

@JsonSerializable()
class User {
  int id;
  String name;
  String email;
}

// flutter pub run build_runner build

4. 请求拦截

通过拦截器，我们可以对请求进行统一处理，如添加身份验证令牌或打印请求信息。

Network._dio.interceptors.add(InterceptorsWrapper(
  onRequest: (RequestOptions options) async {
    // 请求拦截
  },
));

5. 异常处理

为了统一处理网络请求异常，我们可以使用 catchError 方法。

Network._dio.interceptors.add(InterceptorsWrapper(
  onError: (DioError error) async {
    // 异常处理
  },
));

6. 日志打印

日志打印有助于我们调试和分析网络请求。

Network._dio.interceptors.add(LogInterceptor(
  responseBody: true, // 打印响应体
  requestBody: true, // 打印请求体
));

7. loading 显示

我们可以通过 show() 和 dismiss() 方法显示和隐藏 loading。

Network.showLoading() async {
  // 显示 loading
}

Network.dismissLoading() async {
  // 隐藏 loading
}

总结

通过对 dio 进行二次封装，我们可以实现网络请求的简单易用、统一数据解析、统一异常处理、请求拦截、日志打印和 loading 显示。这种封装方式极大地简化了网络请求流程，提高了开发效率和代码可维护性。