简介

• 在OC中，网络库基本上用AFNetworking，其他的都成了小众；

• 在Swift中，网络库基本上用Alamofire，大多从AFNetworking迁移而来，习惯使然；小部分使用Moya，是Alamofire的二次封装，使用命令模式，喜欢的可以直接拿来用。

• 同样地，在Flutter中，基本上就是封装Dio，从Pub上的指标数就可以看出其受欢迎的程度。并且还因此延伸出很多带dio前缀的辅助插件。

如何封装？

• 按照某种设计模式去封装，比如命令模式的Moya，就是命令模式的一种封装方法，受到广泛好评。

• 也可以不封装，直接使用Dio，这也未尝不可。Dio的使用已经非常简洁，文档也有，比如中文手册

• 为了减少重复：这是一个很好的封装思路。直接使用的话，会有好多的重复代码，为了减少重复，进行封装，比如公共的url设置，公共的头部设置，公共的参数设置等等。

• 面向需求：比如重传，是否显示loading，日志等各种公共需求，就可以通过封装达到重用的目的。

• 辅助的插件：一些名称中带dio的插件一般都是封装Dio时可以利用的，比如日志、缓存等等。

封装实践

1. 基础单例

• 一些公共参数可以集中到一个类中，方便修改，名字可以是HttpConfig之类的。

import 'dart:io';

/// 配置参数
class HttpConfig {
  static const baseUrl = "http://47.92.232.69:8080";
  static const connectTimeout = 5;
  static const receiveTimeout = 3;
  static const contentType = "application/json; charset=utf-8";
  static const accept =  "application/json,*/*";
  static String platform = Platform.isAndroid ? "android" : "ios";
}

• 一些额外的功能，比如log之类的，都是通过拦截器来实现的。比如pretty_dio_logger就是以拦截器形式出现的日志插件，可以直接添加。

• 一般情况，都会把网络基础工具封装成一个单例，名字可以是HttpManager之类的。而Dio作为其内部对象，实际完成网络访问作用。

/// 封装一个Dio
class HttpManager {
  /// 内部Dio对象
  late Dio _dio;

  /// 单例模式
  static final HttpManager _instance = HttpManager._internal();

  factory HttpManager() => _instance;

  HttpManager._internal() {
    /// 公共头部
    Map<String, String> headers = {
      'Accept': HttpConfig.accept,
      'ContentType': HttpConfig.contentType,
      'platform': HttpConfig.platform,
    };

    /// 初始配置
    final options = BaseOptions(
      baseUrl: HttpConfig.baseUrl,
      headers: headers,
      connectTimeout: const Duration(seconds: HttpConfig.connectTimeout),
      receiveTimeout: const Duration(seconds: HttpConfig.receiveTimeout),
      responseType: ResponseType.json,
      contentType: HttpConfig.contentType,
    );

    /// 初始化Dio对象
    _dio = Dio(options);

    /// 各种拦截器
    /// 拦截器 - 日志打印 - 生产环境不添加 - 一般放最后
    if (!kReleaseMode) {
      _dio.interceptors.add(PrettyDioLogger(
        requestHeader: true,
        requestBody: true,
        responseHeader: false,
        responseBody: true,
        error: true,
        compact: true,
        maxWidth: 90,
      ));
    }
  }
}

2. 统一的网络请求

• 直接在Dio提供的get，post等方法上再包一层是可行的，现实中也有这么做的。

• Dio也提供了统一的request方法，也可以封装这个，让网络相关的处理代码更加集中，我们这次就尝试用这个。在这里，可以丢弃一些不需要的参数，比如cancelToken，onSendProgress，onReceiveProgress等。这几个参数在数据接口中作用不大，在图片文件等上传的时候才有用，应该在其他的地方另外封装。数据接口和文件接口应该分开，不应该用同一个接口。

  /// Make HTTP request with options.
  Future<Response<T>> request<T>(
    String url, {  // 其实是path，baseUrl+这个+queryParameters形成最终的url
    Object? data, // post等用这个，在body部分
    Map<String, dynamic>? queryParameters,  // get用这个，拼接在最终的url之后
    CancelToken? cancelToken, // 取消功能很少用到
    Options? options, // method在这里设置
    ProgressCallback? onSendProgress, // 数据接口，很少用到进度条
    ProgressCallback? onReceiveProgress, // 数据接口，很少用到进度条
  });

• 关于Method，Options中是一个String，所以我们可以包装成一个枚举值，目前只考虑，get，post，表单post三种。Options中的其他参数没有必要改，直接保持BaseOptions中的就好。

/// Http类型
enum HttpMethod {
  get(value: "GET"),
  post(value: "POST"),
  postFormData(value: "POST"),;

  const HttpMethod({
    required this.value,
  });

  /// Dio的Option结果中需要method值
  final String value;
}

• Dio提供的Response对象，一般只有data、statusCode、statusMessage有点作用，其他的基本上用不到。可以考虑在这里将Response统一处理，只取需要的信息，丢弃没有必要的字段，简化使用。

• 可以和后端约定，返回的数据遵循统一的结构，那么在这里做一次统一的处理。可以自定义一个响应结构，比如：

class BaseResponse<T> {
  /// 状态码
  int? code;

  /// 数据
  T? data;

  /// 原因
  String? errMsg;
  
  /// 成功的定义
  bool get isSuccess {
    return (code == 0);
  }
}

• 错误处理：网络访问难免会发生意外，所以把request放在一个try catch结构中，错误类型就根据DioException，可以添加一些自定义的描述。

• 按照以上思路，大致的代码如下：

  /// 统一的请求方法
  Future<BaseResponse> doRequest(
    String path,
    HttpMethod method, {
    Map<String, dynamic>? parameters,
  }) async {
    Options options = Options(method: method.value);

    /// 根据method类型处理参数
    Object? data;
    Map<String, dynamic>? queryParameters;
    switch (method) {
      case HttpMethod.get:
        queryParameters = parameters;
      case HttpMethod.post:
        data = parameters;
      case HttpMethod.postFormData:
        if (parameters != null) {
          data = FormData.fromMap(parameters);
        }
    }

    /// 包装成自定义的响应；后端自定义的数据优先
    BaseResponse baseResponse = BaseResponse();
    try {
      /// 统一调用request进行数据传输
      final dioResponse = await _dio.request(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
      );
      baseResponse.code = dioResponse.data?["code"] ?? dioResponse.statusCode;
      baseResponse.data = dioResponse.data?["data"];
      baseResponse.errMsg =
          dioResponse.data?["errMsg"] ?? dioResponse.statusMessage;
    } on DioException catch (e) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx and is also not 304.
      if (e.response != null) {
        baseResponse.code = e.response?.statusCode;
        baseResponse.data = e.response?.data;
        baseResponse.errMsg = e.response?.statusMessage;
      } else {
        // Something happened in setting up or sending the request that triggered an Error
        baseResponse.code = -1;
        baseResponse.errMsg = "未知错误";
      }
    }
    return baseResponse;
  }

3. 封装成静态方法

从使用的方便程度来说，静态方法比单例更简洁，所以可以根据业务分类，可以再封装一层。比如，登录相关的接口统一封装成LoginApi

class LoginApi {
  /// 手机号和密码登录
  static Future<BaseResponse> login(String phone, String password) async {
    return HttpManager().doRequest("/sign/signUp/password", HttpMethod.postFormData, parameters: {
      "phone": phone,
      "password": password,
    });
  }
}

4. 使用方式

    /// 使用方式
    BaseResponse response = await LoginApi.login("138xxxxxxxx", "123456");
    if (response.isSuccess) {
      ToastUtil.showText(text: "登录成功");
    } else {
      ToastUtil.showText(text: response.errMsg ?? "登录失败");
    }

运行的log

flutter:
flutter: ╔╣ Request ║ POST
flutter: ║  http://47.92.232.69:8080/sign/signUp/password
flutter: ╚══════════════════════════════════════════════════════════════════════════════════════════╝
flutter: ╔ Headers
flutter: ╟ Accept: application/json,*/*
flutter: ╟ ContentType: application/json; charset=utf-8
flutter: ╟ platform: ios
flutter: ╟ content-type: application/json; charset=utf-8
flutter: ╟ contentType: application/json; charset=utf-8
flutter: ╟ responseType: ResponseType.json
flutter: ╟ followRedirects: true
flutter: ╟ connectTimeout: 0:00:05.000000
flutter: ╟ receiveTimeout: 0:00:03.000000
flutter: ╚══════════════════════════════════════════════════════════════════════════════════════════╝
flutter: ╔ Form data | --dio-boundary-3423058919
flutter: ╟ phone: 138xxxxxxxx
flutter: ╟ password: 123456
flutter: ╚══════════════════════════════════════════════════════════════════════════════════════════╝
flutter:
flutter: ╔╣ Response ║ POST ║ Status: 200
flutter: ║  http://47.92.232.69:8080/sign/signUp/password
flutter: ╚══════════════════════════════════════════════════════════════════════════════════════════╝
flutter: ╔ Body
flutter: ║
flutter: ║    {
flutter: ║         code: 0,
flutter: ║         "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjdXJyZW50IjoxNzE4NzA1NTkxMDk5LCJ1c2VyTmFt
flutter: ║         ZSI6IjE1ODU4MTA5MjkxIiwiZXhwIjoxNzUwMjQxNTkxLCJpYXQiOjE3MTg3MDU1OTF9.KowT4myybCop0
flutter: ║         d7PFdeVQ1-iGhJtYJkqDndDECrviD4"
flutter: ║         errMsg: "处理成功"
flutter: ║    }
flutter: ║
flutter: ╚══════════════════════════════════════════════════════════════════════════════════════════╝

整体来说pretty_dio_logger这个插件的log还可以，虽然不能区分颜色之类的，不过基本上还是区分得很清楚的。如果不满意，当然可以自己写拦截器，自己写log
拦截器是Dio的大功能，很多需求都是通过拦截器来实现的。