Flutter网络请求库Dio的封装（单例、动态baseUrl、拦截器、日志、请求loading）

左手的ㄟ右手 2022-12-22 09:18 578阅读 0赞

封装网络请求的几个好处：

  1. 便于统一配置请求参数，如header，公共参数，加密规则等
  2. 方便调试，详细的日志打印信息
  3. 优化代码性能，避免到处滥new对象，构建全局单例
  4. 简化请求步骤，只暴露需要的响应数据，而对错误的响应统一回调
  5. 对接口数据的基类封装，简化解析流程
  6. 无侵入的，灵活的请求loading配置

请求loading自动化

只需要传递一个参数，就可以为请求加上Loading效果，没有任何的代码入侵

  1. var params = DataHelper.getBaseMap();
  2.     params.clear();
  3.     params["apikey"] = "0df993c66c0c636e29ecbb5344252a4a";
  4.     params["start"] = "0";
  5.     params["count"] = "10";
  6. //withLoading也可以省略，默认就加上，会更简洁
  7.     ResultData res = await HttpManager.getInstance()
  8.         .get(Address.TEST_API, params: params, withLoading: true);

3c5a462397b424eed8dd3217db830f20.webp

请求时loading

清晰全面的日志打印

再也不需要额外地配置抓包了，接口调试效率大大提升

6162f2e1168be7e0477b3776c2dab34a.webp

image.png

下面通过关键源码介绍下封装过程

HttpManager的定义

构造全局单例，配置请求参数，配置通用的GET\POST，支持baseUrl的切换

  1. import 'package:dio/dio.dart';
  2. import 'package:flutter_net/code.dart';
  3. import 'package:flutter_net/dio_log_interceptor.dart';
  4. import 'package:flutter_net/loading_utils.dart';
  5. import 'response_interceptor.dart';
  6. import 'result_data.dart';
  7. import 'address.dart';
  9. class HttpManager {
  10.   static HttpManager _instance = HttpManager._internal();
  11.   Dio _dio;
  13.   static const CODE_SUCCESS = 200;
  14.   static const CODE_TIME_OUT = -1;
  16.   factory HttpManager() => _instance;
  18.   ///通用全局单例，第一次使用时初始化
  19.   HttpManager._internal({String baseUrl}) {
  20.     if (null == _dio) {
  21.       _dio = new Dio(
  22.           new BaseOptions(baseUrl: Address.BASE_URL, connectTimeout: 15000));
  23.       _dio.interceptors.add(new DioLogInterceptor());
  24. //      _dio.interceptors.add(new PrettyDioLogger());
  25.       _dio.interceptors.add(new ResponseInterceptors());
  26.     }
  27.   }
  29.   static HttpManager getInstance({String baseUrl}) {
  30.     if (baseUrl == null) {
  31.       return _instance._normal();
  32.     } else {
  33.       return _instance._baseUrl(baseUrl);
  34.     }
  35.   }
  37.   //用于指定特定域名
  38.   HttpManager _baseUrl(String baseUrl) {
  39.     if (_dio != null) {
  40.       _dio.options.baseUrl = baseUrl;
  41.     }
  42.     return this;
  43.   }
  45.   //一般请求，默认域名
  46.   HttpManager _normal() {
  47.     if (_dio != null) {
  48.       if (_dio.options.baseUrl != Address.BASE_URL) {
  49.         _dio.options.baseUrl = Address.BASE_URL;
  50.       }
  51.     }
  52.     return this;
  53.   }
  55.   ///通用的GET请求
  56.   get(api, {params, withLoading = true}) async {
  57.     if (withLoading) {
  58.       LoadingUtils.show();
  59.     }
  61.     Response response;
  62.     try {
  63.       response = await _dio.get(api, queryParameters: params);
  64.       if (withLoading) {
  65.         LoadingUtils.dismiss();
  66.       }
  67.     } on DioError catch (e) {
  68.       if (withLoading) {
  69.         LoadingUtils.dismiss();
  70.       }
  71.       return resultError(e);
  72.     }
  74.     if (response.data is DioError) {
  75.       return resultError(response.data['code']);
  76.     }
  78.     return response.data;
  79.   }
  81.   ///通用的POST请求
  82.   post(api, {params, withLoading = true}) async {
  83.     if (withLoading) {
  84.       LoadingUtils.show();
  85.     }
  87.     Response response;
  89.     try {
  90.       response = await _dio.post(api, data: params);
  91.       if (withLoading) {
  92.         LoadingUtils.dismiss();
  93.       }
  94.     } on DioError catch (e) {
  95.       if (withLoading) {
  96.         LoadingUtils.dismiss();
  97.       }
  98.       return resultError(e);
  99.     }
  101.     if (response.data is DioError) {
  102.       return resultError(response.data['code']);
  103.     }
  105.     return response.data;
  106.   }
  107. }
  109. ResultData resultError(DioError e) {
  110.   Response errorResponse;
  111.   if (e.response != null) {
  112.     errorResponse = e.response;
  113.   } else {
  114.     errorResponse = new Response(statusCode: 666);
  115.   }
  116.   if (e.type == DioErrorType.CONNECT_TIMEOUT ||
  117.       e.type == DioErrorType.RECEIVE_TIMEOUT) {
  118.     errorResponse.statusCode = Code.NETWORK_TIMEOUT;
  119.   }
  120.   return new ResultData(
  121.       errorResponse.statusMessage, false, errorResponse.statusCode);
  122. }

响应基类

默认200的情况isSuccess为true，响应为response.data,赋值给data

  1. class ResultData {
  2.   var data;
  3.   bool isSuccess;
  4.   int code;
  5.   var headers;
  7.   ResultData(this.data, this.isSuccess, this.code, {this.headers});
  8. }

Api的封装

请求的集中管理

  1. class Api {
  2.   ///示例请求
  3.   static request(String param) {
  4.     var params = DataHelper.getBaseMap();
  5.     params['param'] = param;
  6.     return HttpManager.getInstance().get(Address.TEST_API, params);
  7.   }
  8. }

公共参数和加密等

  1. class DataHelper{
  2.   static SplayTreeMap getBaseMap() {
  3.     var map = new SplayTreeMap<String, dynamic>();
  4.     map["platform"] = AppConstants.PLATFORM;
  5.     map["system"] = AppConstants.SYSTEM;
  6.     map["channel"] = AppConstants.CHANNEL;
  7.     map["time"] = new DateTime.now().millisecondsSinceEpoch.toString();
  8.     return map;
  9.   }
  11.   static string2MD5(String data) {
  12.     var content = new Utf8Encoder().convert(data);
  13.     var digest = md5.convert(content);
  14.     return hex.encode(digest.bytes);
  15.   }
  16. }

地址的配置

方便地址管理

  1. class Address {
  2.   static const String TEST_API =  "test_api";
  3. }

响应拦截器

过滤正确的响应数据，对数据进行初步封装

  1. import 'package:dio/dio.dart';
  2. import 'package:exchange_flutter/common/net/code.dart';
  3. import 'package:flutter/material.dart';
  4. import '../result_data.dart';
  6. class ResponseInterceptors extends InterceptorsWrapper {
  7.   @override
  8.   onResponse(Response response) {
  9.     RequestOptions option = response.request;
  10.     try {
  11.       if (option.contentType != null &&
  12.           option.contentType.primaryType == "text") {
  13.         return new ResultData(response.data, true, Code.SUCCESS);
  14.       }
  15.       ///一般只需要处理200的情况，300、400、500保留错误信息
  16.       if (response.statusCode == 200 || response.statusCode == 201) {
  17.         int code = response.data["code"];
  18.         if (code == 0) {
  19.           return new ResultData(response.data, true, Code.SUCCESS,
  20.               headers: response.headers);
  21.         } else if (code == 100006 || code == 100007) {
  23.         } else {
  24.           Fluttertoast.showToast(msg: response.data["msg"]);
  25.           return new ResultData(response.data, false, Code.SUCCESS,
  26.               headers: response.headers);
  27.         }
  28.       }
  29.     } catch (e) {
  30.       print(e.toString() + option.path);
  32.       return new ResultData(response.data, false, response.statusCode,
  33.           headers: response.headers);
  34.     }
  36.     return new ResultData(response.data, false, response.statusCode,
  37.         headers: response.headers);
  38.   }
  39. }

日志拦截器

打印请求参数和返回参数

  1. import 'package:dio/dio.dart';
  3. ///日志拦截器
  4. class DioLogInterceptor extends Interceptor {
  5.   @override
  6.   Future onRequest(RequestOptions options) async {
  7.     String requestStr = "\n==================== REQUEST ====================\n"
  8.         "- URL:\n${options.baseUrl + options.path}\n"
  9.         "- METHOD: ${options.method}\n";
  11.     requestStr += "- HEADER:\n${options.headers.mapToStructureString()}\n";
  13.     final data = options.data;
  14.     if (data != null) {
  15.       if (data is Map)
  16.         requestStr += "- BODY:\n${data.mapToStructureString()}\n";
  17.       else if (data is FormData) {
  18.         final formDataMap = Map()
  19.           ..addEntries(data.fields)
  20.           ..addEntries(data.files);
  21.         requestStr += "- BODY:\n${formDataMap.mapToStructureString()}\n";
  22.       } else
  23.         requestStr += "- BODY:\n${data.toString()}\n";
  24.     }
  25.     print(requestStr);
  26.     return options;
  27.   }
  29.   @override
  30.   Future onError(DioError err) async {
  31.     String errorStr = "\n==================== RESPONSE ====================\n"
  32.         "- URL:\n${err.request.baseUrl + err.request.path}\n"
  33.         "- METHOD: ${err.request.method}\n";
  35.     errorStr +=
  36.         "- HEADER:\n${err.response.headers.map.mapToStructureString()}\n";
  37.     if (err.response != null && err.response.data != null) {
  38.       print('╔ ${err.type.toString()}');
  39.       errorStr += "- ERROR:\n${_parseResponse(err.response)}\n";
  40.     } else {
  41.       errorStr += "- ERRORTYPE: ${err.type}\n";
  42.       errorStr += "- MSG: ${err.message}\n";
  43.     }
  44.     print(errorStr);
  45.     return err;
  46.   }
  48.   @override
  49.   Future onResponse(Response response) async {
  50.     String responseStr =
  51.         "\n==================== RESPONSE ====================\n"
  52.         "- URL:\n${response.request.uri}\n";
  53.     responseStr += "- HEADER:\n{";
  54.     response.headers.forEach(
  55.         (key, list) => responseStr += "\n  " + "\"$key\" : \"$list\",");
  56.     responseStr += "\n}\n";
  57.     responseStr += "- STATUS: ${response.statusCode}\n";
  59.     if (response.data != null) {
  60.       responseStr += "- BODY:\n ${_parseResponse(response)}";
  61.     }
  62.     printWrapped(responseStr);
  63.     return response;
  64.   }
  66.   void printWrapped(String text) {
  67.     final pattern = new RegExp('.{1,800}'); // 800 is the size of each chunk
  68.     pattern.allMatches(text).forEach((match) => print(match.group(0)));
  69.   }
  71.   String _parseResponse(Response response) {
  72.     String responseStr = "";
  73.     var data = response.data;
  74.     if (data is Map)
  75.       responseStr += data.mapToStructureString();
  76.     else if (data is List)
  77.       responseStr += data.listToStructureString();
  78.     else
  79.       responseStr += response.data.toString();
  81.     return responseStr;
  82.   }
  83. }
  85. extension Map2StringEx on Map {
  86.   String mapToStructureString({int indentation = 2}) {
  87.     String result = "";
  88.     String indentationStr = " " * indentation;
  89.     if (true) {
  90.       result += "{";
  91.       this.forEach((key, value) {
  92.         if (value is Map) {
  93.           var temp = value.mapToStructureString(indentation: indentation + 2);
  94.           result += "\n$indentationStr" + "\"$key\" : $temp,";
  95.         } else if (value is List) {
  96.           result += "\n$indentationStr" +
  97.               "\"$key\" : ${value.listToStructureString(indentation: indentation + 2)},";
  98.         } else {
  99.           result += "\n$indentationStr" + "\"$key\" : \"$value\",";
  100.         }
  101.       });
  102.       result = result.substring(0, result.length - 1);
  103.       result += indentation == 2 ? "\n}" : "\n${" " * (indentation - 1)}}";
  104.     }
  106.     return result;
  107.   }
  108. }
  110. extension List2StringEx on List {
  111.   String listToStructureString({int indentation = 2}) {
  112.     String result = "";
  113.     String indentationStr = " " * indentation;
  114.     if (true) {
  115.       result += "$indentationStr[";
  116.       this.forEach((value) {
  117.         if (value is Map) {
  118.           var temp = value.mapToStructureString(indentation: indentation + 2);
  119.           result += "\n$indentationStr" + "\"$temp\",";
  120.         } else if (value is List) {
  121.           result += value.listToStructureString(indentation: indentation + 2);
  122.         } else {
  123.           result += "\n$indentationStr" + "\"$value\",";
  124.         }
  125.       });
  126.       result = result.substring(0, result.length - 1);
  127.       result += "\n$indentationStr]";
  128.     }
  130.     return result;
  131.   }
  132. }

示例请求

dart的json解析推荐使用json_serializable，其他的有些坑，慎用

  1. void request() async {
  2.     ResultData res = await Api.request("param");
  3.     if (res.isSuccess) {
  4.        //拿到res.data就可以进行Json解析了，这里一般用来构造实体类
  5.             TestBean bean = TestBean.fromMap(res.data);
  7.     }else{
  8.       //处理错误
  9.     }
  10.   }

Demo地址 https://github.com/po1arbear/Flutter-Net.git

如果觉得有帮助，希望能给个star鼓励下，如果不能满足你的需求，欢迎提issue : )

作者：刺客的幻影
链接：https://www.jianshu.com/p/5ead0cf96642
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发表评论

表情：
评论列表 （有 0 条评论，578人围观）

还没有评论，来说两句吧...

相关阅读