我司是怎么封装Axios来处理百万级流量中平时少见过的问题

本文是我们团队每周分享的内容，该内容是由导师整理分享的。Eaxios 是我们前端团队自己在用的库，由导师封装的，因为其他小伙伴对它有所好奇，所以才有该篇的分享内容。

专注于为中小企业提供成都网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业东营区免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

正文开始~~

Eaxios

Eaxios 是基于 axios 封装的网络请求库，在保持 API 与 axios 基本一致的情况下，简化服务端响应内容和各种异常情况的处理。

开发背景

如上图所示，是一次 Ajax 请求可能输出的结果，在前端我们需要根据输出结果给用户不同的提示。

  • 请求被取消：忽略
  • 网络异常：提示检查是否连接网络
  • 请求超时：提示网络慢，请切换网络
  • 服务器异常：提示系统出问题了
  • 响应解析失败：同上，且可以进行错误日志上报
  • 请求失败：这种情况通常是业务异常，前端需要根据错误码进行相应的处理，最简单的就是消息提醒
  • 请求成功：前端拿到数据后更新界面

但是，现有的 Axios 库对于异常结果没有提供较好的封装，Axios Promise catch 里包含各种类型的错误，而且没有提供错误码来识别请求失败的原因。而且很多服务端接口会返回自己的错误码，这样在 Axios Promise then 里也需要处理业务异常。

此外，Axios 本身如下所述的一些问题和局限性。

  • 如果设置 Axios responseType 为 json 时，服务端返回的非 JSON 格式的响应内容会因为无法解析，response.data 为 null

对于 500 等错误，响应内容会丢失，所以不要去配置 responseType 为 json，对于使用者来说容易采到这个坑。

ps：虽然 Axios 官方文档声明 responseType 是 json，实际上底层调用 XMLHttpRequest 的 responseType 是没有传值的，应该是为了规避这个问题。

  • Axios 默认不管 HTTP 响应状态和 responseType 是什么，都会调用默认的 transformResponse

ps：应该是为了规避上一个问题，默认提供了一个响应处理函数进行 JSON 解析，但是这会影响性能(500 等响应内容值较多时，会造成页面卡顿)。虽然 transformResponse 可以转换 response，实际接收到的参数是 response.data，所以无法判断具体情况来决定是否进行解析 JSON。

  • Axios then 和 catch 是根据 validateStatus 决定的，使用者处理以来较为麻烦。

理想情况下，使用者希望 then 返回有效的数据，catch 返回各种错误情况：请求被取消、网络异常、网络超时、服务端异常、服务端数据格式错误、业务异常。

  • Axios 默认不处理 content-type 为 application/x-www-form-urlencoded 类型的请求体，使用起来不够方便

优化方案：

  • 如果设置 Axios responseType 为 json 时，不要传给传 XMLHttpRequest，以避免非 JSON 格式的响应内容丢失
  • Axios 根据响应头的 content-type 判断是否需要解析 JSON，以避免性能问题
  • 通过请求拦截器实现不给 Axios 传递 transformResponse 配置，且将配置备份到其他字段上，然后在响应拦截器中将响应对象 response 传递给 transformResponse 处理。响应拦截器根据 response 提供的状态码、响应头和响应内容判断是否要进行 JSON 转换。
  • 取消 Axios validateStatus 的配置选项，默认所有大于 0 的状态码都是正确的状态码，然后在 Axios 拦截器 then 中进行数据解析(非 200 的可能也是 JSON，所以要复用 200 的 JSON 解析代码)，并且根据异常情况抛出直观的错误对象
  • 内置默认处理表单类型的请求体

用法说明

eaxios 主要对响应的处理做了一些优化，除了以下部分，eaxios 的 api 与 axios 保持一致：

  • eaxios 请求配置的 transformResponse 传参和处理时机发生了变化
  • axios 在服务端响应内容后就会调用 transformResponse 进行响应转换，eaxios 响应后内部自动根据响应头和 responseType 进行 JSON 解析，然后将解析后的数据和 response 传给 transformResponse，transformResponse 返回的数据最终会被 Promise resovle 给外部调用者。
  • 假设服务端返回的数据结构为 { code: 0, message: 'success', data: {} }，code 为 0 表示正确的响应，非 0 表示异常，接口请求的代码示例如下所示：
 
 
 
 
    
  
  
  
  
  1. const eaxios = require('eaxios');
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. eaxios.defaults.transformResponse = [
    4. 
  
  
  
  
  4.   function (data, response) {
    5. 
  
  
  
  
  5.     if (typeof data === 'object') {
    6. 
  
  
  
  
  6.       // 默认约定有成功解析 JSON 对象，就认为服务端成功响应，且有提供错误码
    7. 
  
  
  
  
  7.       if (data.code === 0) {
    8. 
  
  
  
  
  8.         return data.data;
    9. 
  
  
  
  
  9.       } else {
    10. 
  
  
  
  
  10.         throw eaxios.createError(data.message, data.code, response);
    11. 
  
  
  
  
  11.       }
    12. 
  
  
  
  
  12.     } else {
    13. 
  
  
  
  
  13.       // 50x 等服务异常情况
    14. 
  
  
  
  
  14.       throw eaxios.createError(
    15. 
  
  
  
  
  15.         data,
    16. 
  
  
  
  
  16.         response.config.responseError.SERVER_ERROR,
    17. 
  
  
  
  
  17.         response
    18. 
  
  
  
  
  18.       );
    19. 
  
  
  
  
  19.     }
    20. 
  
  
  
  
  20.   },
    21. 
  
  
  
  
  21. ];
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. return eaxios('https://run.mocky.io/v3/4f503449-0349-467e-a38a-c804956712b7')
    24. 
  
  
  
  
  24.   .then((data) => {
    25. 
  
  
  
  
  25.     console.log('success', data.id);
    26. 
  
  
  
  
  26.   })
    27. 
  
  
  
  
  27.   .catch((error) => {
    28. 
  
  
  
  
  28.     console.log('failure', error.code); // UNKNOWN、REQUEST_OFFLINE、REQUEST_TIMEOUT、SERVER_ERROR、RESPONSE_INVALID 和业务错误码
    29. 
  
  
  
  
  29.   });
    30.

ps：如果存在服务单接口请求规范，可以通过 eaxios.create 创建适用于不同接口规范的请求函数。

  • eaxios 的请求处理函数 then 只会接收到 transformResponse 转换后的数据，对于网络、超时、服务端异常和业务异常等问题，会在 catch 接收一个 EaxiosError 类型的错误对象。
 
 
 
 
    
  
  
  
  
  1. interface EaxiosError extends Error {
    2. 
  
  
  
  
  2.   config: EaxiosRequestConfig;
    3. 
  
  
  
  
  3.   code?: string;
    4. 
  
  
  
  
  4.   request?: any;
    5. 
  
  
  
  
  5.   response?: EaxiosResponse;
    6. 
  
  
  
  
  6.   isAxiosError: boolean;
    7. 
  
  
  
  
  7.   toJSON: () => object;
    8. 
  
  
  
  
  8. }
    9.

错误处理函数可以根据错误码 code 来处理异常，code 可能的值为 UNKNOWN、REQUEST_OFFLINE、REQUEST_TIMEOUT、SERVER_ERROR、RESPONSE_INVALID 和其他业务错误码。ps：如果要定制错误码，可以在请求配置中添加配置项 `responseError`。

 
 
 
 
    
  
  
  
  
  1. eaxios.defaults.responseError = {
    2. 
  
  
  
  
  2.   REQUEST_OFFLINE: '1'REQUEST_OFFLINE
    3. 
  
  
  
  
  3. };
    4.
  • eaxios 内部会自动序列化表单类型的请求参数，所以主要传对象给 data 就行了。

代码示例

下面以 { code: 0, message: 'success', data: { } } 这样的接口规范为例，演示如何使用 eaxios。

 
 
 
 
    
  
  
  
  
  1. const eaxios = require('..');
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. const request = eaxios.create({
    4. 
  
  
  
  
  4.   baseURL: 'https://run.mocky.io/v3',
    5. 
  
  
  
  
  5.   timeout: 30000,
    6. 
  
  
  
  
  6.   transformResponse: [
    7. 
  
  
  
  
  7.     function (data, response) {
    8. 
  
  
  
  
  8.       if (typeof data === 'object') {
    9. 
  
  
  
  
  9.         if (data.code === 0) {
    10. 
  
  
  
  
  10.           return data.data;
    11. 
  
  
  
  
  11.         } else {
    12. 
  
  
  
  
  12.           throw eaxios.createError(data.message, data.code, response);
    13. 
  
  
  
  
  13.         }
    14. 
  
  
  
  
  14.       } else {
    15. 
  
  
  
  
  15.         throw eaxios.createError(
    16. 
  
  
  
  
  16.           data,
    17. 
  
  
  
  
  17.           response.config.responseError.SERVER_ERROR,
    18. 
  
  
  
  
  18.           response,
    19. 
  
  
  
  
  19.         );
    20. 
  
  
  
  
  20.       }
    21. 
  
  
  
  
  21.     },
    22. 
  
  
  
  
  22.   ],
    23. 
  
  
  
  
  23. });
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. request.interceptors.response.use(
    26. 
  
  
  
  
  26.   function (response) {
    27. 
  
  
  
  
  27.     return response;
    28. 
  
  
  
  
  28.   },
    29. 
  
  
  
  
  29.   function (error) {
    30. 
  
  
  
  
  30.     if (error && error.code) {
    31. 
  
  
  
  
  31.       if (error.code === 'UNKNOWN') {
    32. 
  
  
  
  
  32.         console.log('未知错误');
    33. 
  
  
  
  
  33.       } else if (error.code === 'REQUEST_OFFLINE') {
    34. 
  
  
  
  
  34.         console.log('网络未连接');
    35. 
  
  
  
  
  35.       } else if (error.code === 'REQUEST_TIMEOUT') {
    36. 
  
  
  
  
  36.         console.log('网络有点慢，请求超时了');
    37. 
  
  
  
  
  37.       } else if (error.code === 'SERVER_ERROR') {
    38. 
  
  
  
  
  38.         console.log('系统出问题了');
    39. 
  
  
  
  
  39.       } else if (error.code === 'RESPONSE_INVALID') {
    40. 
  
  
  
  
  40.         console.log('服务端 bug');
    41. 
  
  
  
  
  41.       } else if (error.code === '10000') {
    42. 
  
  
  
  
  42.         // 假设 10000 为登录会话过期
    43. 
  
  
  
  
  43.         console.log('登录会话失效');
    44. 
  
  
  
  
  44.       } else {
    45. 
  
  
  
  
  45.         console.log('根据情况是否要消息提示，还是外部处理')
    46. 
  
  
  
  
  46.       }
    47. 
  
  
  
  
  47.     }
    48. 
  
  
  
  
  48.     throw error;
    49. 
  
  
  
  
  49.   },
    50. 
  
  
  
  
  50. );
    51. 
  
  
  
  
  51. 
  
  
  
  
  52. function printError(error) {
    53. 
  
  
  
  
  53.   console.log(
    54. 
  
  
  
  
  54.     `code: ${error.code}, name: ${error.name}, message: ${error.message}, isAxiosError: ${error.isAxiosError}, stack:\n${error.stack}`,
    55. 
  
  
  
  
  55.   );
    56. 
  
  
  
  
  56. }
    57. 
  
  
  
  
  57. 
  
  
  
  
  58. function success() {
    59. 
  
  
  
  
  59.   console.log('>> success');
    60. 
  
  
  
  
  60.   return request('/4f503449-0349-467e-a38a-c804956712b7')
    61. 
  
  
  
  
  61.     .then((data) => {
    62. 
  
  
  
  
  62.       console.log('success', data);
    63. 
  
  
  
  
  63.     })
    64. 
  
  
  
  
  64.     .catch((error) => {
    65. 
  
  
  
  
  65.       printError(error);
    66. 
  
  
  
  
  66.     });
    67. 
  
  
  
  
  67. }
    68. 
  
  
  
  
  68. 
  
  
  
  
  69. function failure() {
    70. 
  
  
  
  
  70.   console.log('>> failure');
    71. 
  
  
  
  
  71.   return request('/42d7c21d-5ae6-4b52-9c2d-4c3dd221eba4')
    72. 
  
  
  
  
  72.     .then((data) => {
    73. 
  
  
  
  
  73.       console.log('success', data);
    74. 
  
  
  
  
  74.     })
    75. 
  
  
  
  
  75.     .catch((error) => {
    76. 
  
  
  
  
  76.       printError(error);
    77. 
  
  
  
  
  77.     });
    78. 
  
  
  
  
  78. }
    79. 
  
  
  
  
  79. 
  
  
  
  
  80. function invalid() {
    81. 
  
  
  
  
  81.   console.log('>> invalid');
    82. 
  
  
  
  
  82.   return request('/1b23549f-c918-4362-9ac8-35bc275c09f0')
    83. 
  
  
  
  
  83.     .then((data) => {
    84. 
  
  
  
  
  84.       console.log('success', data);
    85. 
  
  
  
  
  85.     })
    86. 
  
  
  
  
  86.     .catch((error) => {
    87. 
  
  
  
  
  87.       printError(error);
    88. 
  
  
  
  
  88.     });
    89. 
  
  
  
  
  89. }
    90. 
  
  
  
  
  90. 
  
  
  
  
  91. function server_500() {
    92. 
  
  
  
  
  92.   console.log('>> server_500');
    93. 
  
  
  
  
  93.   return request('/2a9d8c00-9688-4d36-b2de-2dee5e81f5b3')
    94. 
  
  
  
  
  94.     .then((data) => {
    95. 
  
  
  
  
  95.       console.log('success', data);
    96. 
  
  
  
  
  96.     })
    97. 
  
  
  
  
  97.     .catch((error) => {
    98. 
  
  
  
  
  98.       printError(error);
    99. 
  
  
  
  
  99.     });
    100. 
  
  
  
  
  100. }
    101. 
  
  
  
  
  101. 
  
  
  
  
  102. success().then(failure).then(invalid).then(server_500);
    103. 
  
  
  
  
  103. /* log
    104. 
  
  
  
  
  104. >> success
    105. 
  
  
  
  
  105. success { id: 1 }
    106. 
  
  
  
  
  106. >> failure
    107. 
  
  
  
  
  107. 登录会话失效
    108. 
  
  
  
  
  108. code: 10000, name: Error, message: error, isAxiosError: true, stack: ...
    109. 
  
  
  
  
  109. >> invalid
    110. 
  
  
  
  
  110. 服务端 bug
    111. 
  
  
  
  
  111. code: RESPONSE_INVALID, name: SyntaxError, message: Unexpected token V in JSON at position 0, isAxiosError: true, stack: ...
    112. 
  
  
  
  
  112. >> server_500
    113. 
  
  
  
  
  113. 系统出问题了
    114. 
  
  
  
  
  114. code: SERVER_ERROR, name: Error, message: ...,  stack: ...
    115. 
  
  
  
  
  115. */
    116.

兼容性

eaxios 依赖 URLSearchParams 处理表单类型的请求参数，不支持的环境需要引入响应的 polyfill

  • core-js
 
 
 
 
    
  
  
  
  
  1. require("core-js/modules/web.url-search-params.js")
    2.
  • url-search-params-polyfill

新闻名称：我司是怎么封装Axios来处理百万级流量中平时少见过的问题
文章源于：http://www.shufengxianlan.com/qtweb/news36/80186.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

动态网站知识

分类信息网站

外贸网站建设　　 　四川广汉锦华　　 　泸县网站建设　　 　成都温江机房　　 　广安迈傲建站　　 　定制网站制作　　 　成都app开发　　 　网上商城管理系统　　 　梓潼网站建设　　 　宣传册设计　　 　成都外贸网站建设　　 　成都雪糕加盟　　 　免备案空间腾讯云　　 　四川盐亭做网站　　 　广汉锦华建材　　 　成都网站营销　　 　温江网站建设　　 　内江做网站　　 　重庆电信回兴机房　　 　成都多线机房