devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Dio 中的拦截器原来有这些用法_dio 拦截器

作者：小丑西瓜9 | 2024-05-02 01:40:46

赞

踩

dio 拦截器

目录

前言

添加或者授权的Token

记录完整的请求日志信息

统一处理后端返回的数据格式

小结

前言

在 Flutter 的第三方网络请求库中，Dio的使用人数应该算是使用最多的，而网络请求过程中有很多额外的事情要做，比如 Request 前需要授权信息，发送网络请求前需要带上令牌（token）；请求的日志记录，方便在测试的同学可以在不用抓包的情况下直接看到完整的请求信息；拿到 Response 进行数据解析、业务错误码判断，拿到正确的业务数据后进行 JSON 转 Model 等等。

添加或者授权的Token

在 Request Header 中添加授权的 Token，一般情况下登录成功后会将 Token 存入本地，退出登录时将 Token 清除掉。

  1. class AuthInterceptor extends Interceptor {
  2.     @override
  3.     onRequest(RequestOptions options, RequestInterceptorHandler handler) {
  4.       // 从本地缓存中取出 Token 
  5.       String accessToken = SaveDataTool().getToken();
  6.       if (accessToken != null &&
  7.           accessToken.isNotEmpty) {
  8.         options.headers['Authorization'] = "Token mobile:$accessToken";
  9.       }
  10.       return super.onRequest(options, handler);
  11.     }
  12.  }

如果 Token 过期了，一般会返回401的错误码，此时需要重新获取一下Token，再缓存到本地。

  1.     var dio = Dio();
  2.     var tokenDio = Dio();
  3.     String? csrfToken;
  4.     dio.options.baseUrl = 'xxx.example.com';
  5.     tokenDio.options = dio.options;
  6.     dio.interceptors.add(QueuedInterceptorsWrapper(
  7.       onRequest: (options, handler) {
  8.         if (csrfToken == null) {
  9.           // 首次获取 csrfToken
  10.           tokenDio.get('/token').then((d) {
  11.             // 这里模拟拿到最新的 csrfToken，并加到 Request headers 中
  12.             options.headers['csrfToken'] = csrfToken = d.data['token'];
  13.             handler.next(options);
  14.           }).catchError((error, stackTrace) {
  15.             handler.reject(error, true);
  16.           });
  17.         } else {
  18.           options.headers['csrfToken'] = csrfToken;
  19.           return handler.next(options);
  20.         }
  21.       },
  22.       onError: (error, handler) {
  23.         if (error.response?.statusCode == 401) {
  24.           var options = error.response!.requestOptions;
  25.           // 如果是401且当前不是最新的csrfToken，那就更新一下 csrfToken
  26.           if (csrfToken != options.headers['csrfToken']) {
  27.             options.headers['csrfToken'] = csrfToken;
  28.             //再发送请求
  29.             dio.fetch(options).then(
  30.                   (r) => handler.resolve(r),
  31.               onError: (e) {
  32.                 handler.reject(e);
  33.               },
  34.             );
  35.             return;
  36.           }
  37.           tokenDio.get('/token').then((d) {
  38.             // 更新到最新的 csrfToken，并加到 Request headers 中
  39.             options.headers['csrfToken'] = csrfToken = d.data['token'];
  40.           }).then((e) {
  41.             //再发送请求
  42.             dio.fetch(options).then(
  43.                   (r) => handler.resolve(r),
  44.               onError: (e) {
  45.                 handler.reject(e);
  46.               },
  47.             );
  48.           });
  49.           return;
  50.         }
  51.         return handler.next(error);
  52.       },
  53.     ));

记录完整的请求日志信息

有时候需要看一下完整的请求日志信息，也自己来定制一套。

  1. class LoggingInterceptor extends Interceptor {
  2.   DebugModel debugModel;
  3.  
  4.   @override
  5.   onRequest(RequestOptions options, RequestInterceptorHandler handler) {
  6.     debugModel = DebugModel();
  7.     debugModel.startTime = DateTime.now();
  8.     debugModel.headers = options.headers.toString();
  9.     debugModel.requestMethod = options.method;
  10.     debugModel.headers = options.headers.toString();
  11.     if (options.queryParameters.isEmpty) {
  12.       debugModel.url = options.baseUrl + options.path;
  13.     } else {
  14.       String re = options.baseUrl +
  15.           options.path +
  16.           "?" +
  17.           Transformer.urlEncodeMap(options.queryParameters);
  18.       debugModel.url = re;
  19.     }
  20.     debugModel.params = options.data != null ? options.data.toString() : null;
  21.     return super.onRequest(options, handler);
  22.   }
  23.  
  24.   @override
  25.   onResponse(Response response, ResponseInterceptorHandler handler) {
  26.     debugModel.endTime = DateTime.now();
  27.     int duration = endTime.difference(startTime).inMilliseconds;
  28.     if (response != null) {
  29.       debugModel.statusCode = response.statusCode;
  30.       if (response.data != null) {
  31.         debugModel.responseString = response.data.toString();
  32.       }
  33.     }
  34.     // DebugUtil 是全局的请求日志管理工具类，每一次的网络请求都会添加到其logs这个数组中
  35.     // 这里只是简单做了一个去重的处理，日常开发中不建议这样判断
  36.     if (!DebugUtil.instance.logs.contains(debugModel)) {
  37.       DebugUtil.instance.addLog(debugModel);
  38.     }
  39.     return super.onResponse(response, handler);
  40.   }
  41.  
  42.   @override
  43.   onError(DioError err, ErrorInterceptorHandler handler) {
  44.     debugModel.error = err.toString();
  45.     if (!DebugUtil.instance.logs.contains(debugModel)) {
  46.       DebugUtil.instance.addLog(debugModel);
  47.     }
  48.     return super.onError(err, handler);
  49.   }
  50. }

保存数据的 DebugModel 和工具类 DebugUtil 的实现。

  1. class DebugModel {
  2.   String url = "";
  3.   String headers = "";
  4.   String requestMethod = "";
  5.   int statusCode = 0;
  6.   String params = "";
  7.   List<Map<String, dynamic>> responseList = [];
  8.   Map<String, dynamic> responseMap = {};
  9.   String responseString = "";
  10.   DateTime startTime = DateTime.now();
  11.   DateTime endTime = DateTime.now();
  12.   String error = "";
  13.  
  14.   DebugModel({this.url, this.params, this.responseList, this.responseMap});
  15. }
  16.  
  17. class DebugUtil {
  18.   factory DebugUtil() => _getInstance();
  19.  
  20.   static DebugUtil get instance => _getInstance();
  21.   static DebugUtil _instance;
  22.  
  23.   DebugUtil._internal();
  24.  
  25.   static DebugUtil _getInstance() {
  26.     if (_instance == null) {
  27.       _instance = DebugUtil._internal();
  28.     }
  29.     return _instance;
  30.   }
  31.  
  32.   List<DebugModel> logs = [];
  33.  
  34.   void addLog(DebugModel log){
  35.     if (logs.length > 10) {
  36.       logs.removeLast();
  37.     }
  38.     logs.insert(0, log);
  39.   }
  40.  
  41.   void clearLogs(){
  42.     logs = [];
  43.   }
  44. }

统一处理后端返回的数据格式

后端返回的数据格式统一处理，也可以通过Interceptor来实现。日常开发过程中，如果前期没有对Response数据做统一的适配，在业务层做解析判断，而后端API接口返回的JSON数据不够规范，又或者随着业务的迭代，API返回JSON数据的结构有了比较大的调整，客户端需要修改所有涉及到网络请求的地方，增加了不少工作量。

{"code":0,"data":{},"message":""}

上面是我们希望的数据格式，而如果后端接口不规范的话，可能是这样的：

{"id":"","tree_id":0,"level":1,"parent":""}

或者直接是这样的：

{"result":{"id":"","tree_id":0,"level":1,"parent":""}}

而在业务查询错误时，返回的又是这样的：

{"detail": "xxxxxx", "err_code": 10004}

这种情况下，最好的办法是直接和后端的开发人员沟通协调，让其做到接口数据规范化，从源头上掐掉将来会出现的隐患，而且API接口如果多端使用，比如有Web、App和小程序都有用到，API做到规范统一能节省很多工作量，减少出错的概率。还有一种情况就是随着业务的迭代，API返回JSON数据的结构有了调整，这时就需要我们可以在拦截器里面做处理。

  1. class AdapterInterceptor extends Interceptor {
  2.   static const String msg = "msg";
  3.   static const String detail = "detail";
  4.   static const String non_field_errors = "non_field_errors";
  5.   static const String defaultText = "\"无返回信息\"";
  6.   static const String notFound = "未找到查询信息";
  7.   static const String failureFormat = "{\"code\":%d,\"message\":\"%s\"}";
  8.   static const String successFormat =
  9.       "{\"code\":0,\"data\":%s,\"message\":\"\"}";
  10.  
  11.   @override
  12.   onResponse(Response response, ResponseInterceptorHandler handler) {
  13.     return super.onResponse(adapterData(response), handler);
  14.   }
  15.  
  16.   @override
  17.   onError(DioError err, ErrorInterceptorHandler handler) {
  18.     if (err.response != null) {
  19.       adapterData(err.response);
  20.     }
  21.     return super.onError(err, handler);
  22.   }
  23.  
  24.   Response adapterData(Response response) {
  25.     String result;
  26.     String content = response.data == null ? "" : response.data.toString();
  27.     /// 成功时，直接格式化返回
  28.     if (response.statusCode == 200) {
  29.       if (content == null || content.isEmpty) {
  30.         content = defaultText;
  31.       }
  32.       
  33.       // 这里还需要对业务错误码的判断
  34.       // .......
  35.       
  36.       // 这里的 sprintf 用的是第三方插件 sprintf: ^6.0.0 来格式化字符串
  37.       result = sprintf(successFormat, [content]);
  38.       response.statusCode = ExceptionHandle.success;
  39.     } else { // 这里一般的是网络错误逻辑
  40.       if (response.statusCode == 404) {
  41.         /// 错误数据格式化后，按照成功数据返回
  42.         result = sprintf(failureFormat, [response.statusCode, notFound]);
  43.       } else {
  44.         // 解析异常直接按照返回原数据处理（一般为返回500,503 HTML页面代码）
  45.         result = sprintf(failureFormat,[response.statusCode, "服务器异常(${response.statusCode})"]);
  46.       }
  47.     }
  48.     response.data = result;
  49.     return response;
  50.   }
  51. }

需要特别提醒的是业务错误码和网络错误码的区别，业务错误码是网络请求是正常的，但数据查询出错，通常是后端自己定义的；而网络错误码就是网络请求报错，如401、404等。客户端需要根据不同的错误码给用户提示或者其它的处理。

小结

这些是我在开发中对于网络请求需要经常处理的地方，如有不严谨的地方，欢迎指正，或者发表自己的看法。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/521616
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号