Flutter 项目中对Dio的封装：从设计到实现

2023-11-26 05:03:22

前言

在 Flutter 项目中，HTTP 网络请求是必不可少的。为了简化和优化网络请求过程，我们可以使用第三方库 Dio。Dio 是一个强大的 HTTP 请求库，它提供了丰富的功能和易于使用的 API。但是，为了更好地适应我们的项目需求，我们可以对 Dio 进行进一步的封装，使其更加符合我们的开发习惯和业务需求。

封装思路

1. 单例操作类

创建一个单例操作类，用于管理 Dio 实例，并提供统一的接口进行网络请求。这样，我们可以在整个项目中使用这个单例类来进行网络请求，而无需在每个地方都创建新的 Dio 实例。

2. 自定义拦截器

自定义拦截器用于处理请求和响应，可以实现的功能包括添加公共请求头、记录日志、处理错误等。通过自定义拦截器，我们可以对网络请求进行统一处理，而无需在每个请求中重复编写这些代码。

3. GET 和 POST 请求

GET 和 POST 是最常用的两种 HTTP 请求方法，分别用于获取数据和发送数据。我们可以封装这两个方法，使其具有更好的可读性和可维护性，并支持传递请求参数和解析响应数据。

具体实现

1. 单例操作类：http_client.dart

import 'package:dio/dio.dart';

class HttpClient {
  static final HttpClient _instance = HttpClient._internal();

  factory HttpClient() => _instance;

  HttpClient._internal();

  final Dio dio = Dio();

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

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

2. 自定义拦截器

import 'package:dio/dio.dart';

class CustomInterceptor extends Interceptor {
  @override
  Future<RequestOptions> onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
    // 添加公共请求头
    options.headers['Content-Type'] = 'application/json';

    return options;
  }

  @override
  Future<Response> onResponse(Response response, ResponseInterceptorHandler handler) async {
    // 记录日志
    print('Request: ${response.requestOptions.uri}');
    print('Response: ${response.data}');

    return response;
  }

  @override
  Future<DioError> onError(DioError err, ErrorInterceptorHandler handler) async {
    // 处理错误
    print('Error: ${err.message}');

    return err;
  }
}

3. GET 和 POST 请求

import 'package:http_client/http_client.dart';

Future<void> main() async {
  // GET 请求
  Response response = await HttpClient().get('https://example.com');
  print(response.data);

  // POST 请求
  response = await HttpClient().post('https://example.com', data: {'name': 'John Doe'});
  print(response.data);
}