Flutter 网络封装 2022-10-12 周三

网络选择

Flutter自带httpClient，这个也是很好用的；
Http库，有个三方库的名字就叫这个；
Dio，这是目前最热门的，相当于iOS中AFNetworking。随大流，就选这个进行封装。

Dio引入

Dio是一个第三方库，所以需要先下载。使用一行命令就可以引入flutter pub add dio
dio: ^4.0.6
日志是需要的，最简单的就是用系统提供debugPrint，基本上也够用了。为Dio专门写的插件也有，比如dio_logger。也有比较流行的插件，比如logger
loading一方面是等待，另一方是防止用户误操作。一般这个也是用第三方插件的居多。
这方面有一个比较突出的第三方插件，那就用吧。
flutter_easyloading: ^3.0.5
另外，toast一般和loading都在一个插件中，这两种都是需要的，类似的插件也可以考虑
bot_toast
感觉上flutter_easyloading要好一点。
网络状态检测，主要是判断有网还是没网，功能和ping类似，这个也一般需要第三方插件。如果没有这个，只有等Dio连接断了再提示。这方面也有一个比较流行的第三方插件。
connectivity_plus: ^2.3.6
当然，监听网络状态也是可以的，不过这个不是强需求，可以再需要的时候添加。
网络缓存，失败重传，cookie管理这些，不是必须的需求，可以延后考虑。目前这些也有相应的Dio配套三方库可以选择。这些都是拦截器模式的，可以随时添加。
抓包，代理，证书验证这些也暂时不加，等以后有需要的时候再考虑。

连接常数

用一个类来保存网络连接需要常数，目前主要是超时时间，baseURL，头部信息等。常见的需求切换后台环境，主要的就是更换这个baseURL

class HttpOptions {
  /// 超时时间；单位是ms
  static const int connectTimeout = 30000;
  static const int receiveTimeout = 30000;

  /// 地址前缀
  static const String baseUrl = 'https://baidu.com';

  /// header
  static const Map<String, dynamic> headers = {
    'Accept': 'application/json,*/*',
    'Content-Type': 'application/json',
    'currency': 'CNY',
    'lang': 'en',
    'device': 'app',
  };
}

异常处理

错误提示是重要的基础功能，绕不过的，所以自定义一个类，实现Exception协议，主要包括错误码和错误信息两部分内容。只需要一次封装就好了，分太细反而麻烦。
DioError是Dio提供的一个错误信息结构，我们可以基于这个，添加一些自定义的信息。
DioError中还包含服务响应Response，里面有代表服务强响应的状态码和错误信息，可以利用这点，对服务器端的错误状态进行一次封装。

import 'package:dio/dio.dart';

class HttpException implements Exception {
  final int code;
  final String msg;

  HttpException({
    this.code = -1,
    this.msg = 'unknow error',
  });

  @override
  String toString() {
    return 'Http Error [$code]: $msg';
  }

  factory HttpException.create(DioError error) {
    /// dio异常
    switch (error.type) {
      case DioErrorType.cancel:
        {
          return HttpException(code: -1, msg: 'request cancel');
        }
      case DioErrorType.connectTimeout:
        {
          return HttpException(code: -1, msg: 'connect timeout');
        }
      case DioErrorType.sendTimeout:
        {
          return HttpException(code: -1, msg: 'send timeout');
        }
      case DioErrorType.receiveTimeout:
        {
          return HttpException(code: -1, msg: 'receive timeout');
        }
      case DioErrorType.response:
        {
          try {
            int statusCode = error.response?.statusCode ?? 0;
            // String errMsg = error.response.statusMessage;
            // return ErrorEntity(code: errCode, message: errMsg);
            switch (statusCode) {
              case 400:
                {
                  return HttpException(code: statusCode, msg: 'Request syntax error');
                }
              case 401:
                {
                  return HttpException(code: statusCode, msg: 'Without permission');
                }
              case 403:
                {
                  return HttpException(code: statusCode, msg: 'Server rejects execution');
                }
              case 404:
                {
                  return HttpException(code: statusCode, msg: 'Unable to connect to server');
                }
              case 405:
                {
                  return HttpException(code: statusCode, msg: 'The request method is disabled');
                }
              case 500:
                {
                  return HttpException(code: statusCode, msg: 'Server internal error');
                }
              case 502:
                {
                  return HttpException(code: statusCode, msg: 'Invalid request');
                }
              case 503:
                {
                  return HttpException(code: statusCode, msg: 'The server is down.');
                }
              case 505:
                {
                  return HttpException(code: statusCode, msg: 'HTTP requests are not supported');
                }
              default:
                {
                  return HttpException(
                      code: statusCode, msg: error.response?.statusMessage ?? 'unknow error');
                }
            }
          } on Exception catch (_) {
            return HttpException(code: -1, msg: 'unknow error');
          }
        }
      default:
        {
          return HttpException(code: -1, msg: error.message);
        }
    }
  }
}

异常拦截器

把错误处理做一个拦截器，在onError方法中将自定义的异常类型放入DioError的error字段（dynamic的）
这个确实有点绕。显示通过DioError的error type来创建自定义的异常类型HttpException；然后又把自定义的异常类型通过拦截器放入DioError的error字段，重新回归到Dio的框架处理过程之中。
如果没有网络，DioError的type字段为DioErrorType.other，这部分自定义的异常类型HttpException并没有处理。所以这个时候，还需要调用一下检测网络状态第三方插件connectivity_plus，看看是不是断网了。

class ErrorInterceptor extends Interceptor {
  @override
  void onError(DioError err, ErrorInterceptorHandler handler) async {
    /// 根据DioError创建HttpException
    HttpException httpException = HttpException.create(err);

    /// dio默认的错误实例，如果是没有网络，只能得到一个未知错误，无法精准的得知是否是无网络的情况
    /// 这里对于断网的情况，给一个特殊的code和msg
    if (err.type == DioErrorType.other) {
      var connectivityResult = await (Connectivity().checkConnectivity());
      if (connectivityResult == ConnectivityResult.none) {
        httpException = HttpException(code: -100, msg: 'None Network.');
      }
    }

    /// 将自定义的HttpException
    err.error = httpException;

    /// 调用父类，回到dio框架
    super.onError(err, handler);
  }
}

封装

一般都会把Dio封装为一个单例。一个APP中，一个Dio实例足够了。
虽然Dio提供了get，post等各种方法，但是需要加入一些自定义的参数，所以一般会直接封装更底层的request方法。
http的method是字符串，可以考虑用一个枚举，在调用request方法的时候统一转换。
loading，错误信息，可以在这个request方法上统一用try catch结构在这里处理
错误信息，log，自定义头部（比如token）等可以通过拦截器的形式加入。有很多配合Dio的拦截器第三方插件，比如pretty_dio_logger
公共头部信息，超时时间，baseUrl等信息可以通过BaseOption的形式在Dio单例创建的时候给出。
切换环境可以通过修改baseUrl的方式实现。直接代码注释是最方便的，高级一点的话，可以通过本地缓存的方式来实现。

class HttpRequest {
  // 单例模式使用Http类，
  static final HttpRequest _instance = HttpRequest._internal();
  factory HttpRequest() => _instance;

  static late final Dio dio;

  /// 内部构造方法
  HttpRequest._internal() {
    /// 初始化dio
    BaseOptions options = BaseOptions(
      connectTimeout: HttpOptions.connectTimeout,
      receiveTimeout: HttpOptions.receiveTimeout,
      sendTimeout: HttpOptions.sendTimeout,
      baseUrl: HttpOptions.baseUrl,
      headers: HttpOptions.headers,
    );
    dio = Dio(options);

    /// 添加各种拦截器
    dio.interceptors.add(ErrorInterceptor());
    dio.interceptors.add(dioLoggerInterceptor);
  }

  /// 封装request方法
  Future request({
    required String path,
    required HttpMethod method,
    dynamic data,
    Map<String, dynamic>? queryParameters,
    bool showLoading = true,
    bool showErrorMessage = true,
  }) async {
    const Map methodValues = {
      HttpMethod.get: 'get',
      HttpMethod.post: 'post',
      HttpMethod.put: 'put',
      HttpMethod.delete: 'delete',
      HttpMethod.patch: 'patch',
      HttpMethod.head: 'head'
    };
    Options options = Options(
      method: methodValues[method],
    );

    try {
      if (showLoading) {
        EasyLoading.show(status: 'loading...');
      }
      Response response = await HttpRequest.dio.request(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
      );
      return response.data;
    } on DioError catch (error) {
      HttpException httpException = error.error;
      if (showErrorMessage) {
        EasyLoading.showToast(httpException.msg);
      }
    } finally {
      if (showLoading) {
        EasyLoading.dismiss();
      }
    }
  }
}

enum HttpMethod {
  get,
  post,
  delete,
  put,
  patch,
  head,
}

工具方法

直接使用request方法不是很方便，所以，再封装一层，对外仍然提供get，post等方便方法
一般直接包装成静态方法，用起来最方便。

/// 调用底层的request，重新提供get，post等方便方法
class HttpUtil {
  static HttpRequest httpRequest = HttpRequest();

  /// get
  static Future get({
    required String path,
    Map<String, dynamic>? queryParameters,
    bool showLoading = true,
    bool showErrorMessage = true,
  }) {
    return httpRequest.request(
      path: path,
      method: HttpMethod.get,
      queryParameters: queryParameters,
      showLoading: showLoading,
      showErrorMessage: showErrorMessage,
    );
  }

  /// post
  static Future post({
    required String path,
    required HttpMethod method,
    dynamic data,
    bool showLoading = true,
    bool showErrorMessage = true,
  }) {
    return httpRequest.request(
      path: path,
      method: HttpMethod.post,
      data: data,
      showLoading: showLoading,
      showErrorMessage: showErrorMessage,
    );
  }

逻辑模块

一般后台会按照逻辑模块分类，分类一般以path中的字符来区分。比如用户模块一般以/user/开头。
对应于后台的习惯，可以考虑以模块名为文件名，将类似的接口放在同一个文件中。比如用户模块都放在user_api.dart文件中。
具体到每一个接口，path，参数等都可以确定，所以在用static方法包一层是可行的。

import 'package:panda_buy/apis/http/http_util.dart';

class UserApi {
  /// path定义
  static const String pathPrefix = '/gateway/user/';

  /// 获取公钥
  static Future getPubKey() {
    return HttpUtil.get(
      path: '${pathPrefix}pubkey',
      showLoading: false,
      showErrorMessage: false,
    );
  }