介绍

学习了** axios 的源码，重构并优化了一些内容。**

特点：

  • 支持 Promise
  • 支持全局、局部(实例)的请求和响应拦截器
  • 支持添加多个、删除拦截器，并在响应拦截器中添加发送请求的 config 数据
  • 支持添加配置文件
  • 支持所有 method 方法
  • 支持 params 参数属性
  • 支持文件上传和下载
  • 支持重新发送请求(刷新 token)

推荐更新到最新版本

兼容性问题、设置**超时时间，**请查看官方文档官方文档: https://uniapp.dcloud.io/api/request/request?id=request

下载地址

推荐先下载示例项目
github: https://github.com/2460392754/uniapp-tools/tree/master/request
dcloud: https://ext.dcloud.net.cn/plugin?id=468

更新日志

https://ext.dcloud.net.cn/plugin?id=468&update_log

1.兼容性测试

✅微信小程序
✅h5
✅android
❓其他平台(没测试)
❗跨域会直接进入catch

2.目录结构

  1. demo项目
  2. ├── api                             api数据
  3. │   └── test.js
  4. ├── components          
  5. │   └── print.vue
  6. ├── pages
  7. │   ├── index
  8. │   │   └── index.vue
  9. │   └── method                                            运行demo
  10. │       ├── download.vue
  11. │       ├── get_200.vue
  12. │       ├── get_400.vue
  13. │       ├── post_200.vue
  14. │       └── upload.vue
  15. ├── plugins
  16. │   └── request                     
  17. │       ├── js
  18. │       │   ├── core
  19. │       │   │   ├── index.js        原型扩展      
  20. │       │   │   ├── interceptor.js  拦截器
  21. │       │   │   ├── mergeConfig.js  数据合并
  22. │       │   │   └── network.js      请求封装
  23. │       │   ├── config.js           配置文件
  24. │       │   ├── index.js            主文件
  25. │       │   └── tools.js            工具类
  26. │       ├── ts
  27. │       └── todo.txt
  28. ├── App.vue
  29. ├── main.js                         插件注册到全局
  30. ├── manifest.json
  31. ├── pages.json
  32. └── README.md

3.运行流程图

“猴子也能看懂的请求运行流程图”
没有配置局部拦截器就进入下一步
uniapp-tools request (2).svg
Promise的链式合并

  1. Promise.resolve()
  3. .then(global_Request)
  4. .catch(global_Request)
  6. .then(scoped_Request)
  7. .catch(scoped_Request)
  9. .then(发送请求)
  10. .catch(请求错误、超时)
  12. .then(global_Response)
  13. .catch(global_Response)
  15. .then(scoped_Response)
  16. .catch(scoped_Response)
  18. .then(获取请求的返回值)
  19. .catch(拦截异常的返回值)

4.设置配置文件(config.js)

参数 类型 必填 默认值 说明
baseURL String
基地址
header Object 请求头，会和请求对象中的header进行合并，请求对象中header的优先级大于全局

全局参数

  1. /**
  2.  * 全局配置
  3.  * 只能配置 静态数据
  4.  * `content-type` 默认为 application/json
  5.  * header 中`content-type`设置特殊参数 或 配置其他会导致触发 跨域 问题，出现跨域会直接进入响应拦截器的catch函数中
  6.  */
  7. export const config = {
  8.     baseURL: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b',
  9.     header: {
  10.         // uid: 'xxxx',
  11.         contentType: 'application/x-www-form-urlencoded'
  12.         // 'Content-Type': 'application/json'
  13.     },
  14. }

全局拦截器

  1. /**
  2.  * 全局 请求拦截器
  3.  * 例如: 配置token
  4.  * 
  5.  * `return config` 继续发送请求
  6.  * `return false` 会停止发送请求，不会进入错误数据拦截，也不会进入请求对象中的catch函数中
  7.  * `return Promise.reject('xxxxx')` 停止发送请求, 会错误数据拦截，也会进入catch函数中
  8.  * 
  9.  * @param {Object} config 发送请求的配置数据
  10.  */
  11. globalInterceptor.request.use(config => {
  12.     console.log('is global request interceptor 1');
  14.     return config;
  15.     // return false;
  16.     // return Promise.reject('is error')
  17. }, err => {
  18.     console.error('is global fail request interceptor: ', err);
  19.     return false;
  20. });
  22. // 支持添加多个请求、响应拦截器
  23. globalInterceptor.request.use(config => {
  24.     console.log('is global request interceptor 2');
  25.     return config;
  26. }, err => {
  27.     console.error('global request: ', err);
  28.     return false;
  29. });
  34. /**
  35.  * 全局 响应拦截器
  36.  * 例如: 根据状态码选择性拦截、过滤转换数据
  37.  * 
  38.  * `return res` 继续返回数据
  39.  * `return false` 停止返回数据，不会进入错误数据拦截，也不会进入catch函数中
  40.  * `return Promise.reject('xxxxx')` 返回错误信息, 会错误数据拦截，也会进入catch函数中
  41.  * 
  42.  * @param {Object} res 请求返回的数据
  43.  * @param {Object} config 发送请求的配置数据
  44.  * @return {Object|Boolean|Promise<reject>}
  45.  */
  46. globalInterceptor.response.use((res, config) => {
  47.     console.log('is global response interceptor');
  49.     // 回传数据中没有携带 code
  50.     if (!(res.data && res.data.code)) {
  51.         return res;
  52.     }
  54.     // 用code模拟http状态码
  55.     const code = parseInt(res.data.code);
  57.     // 20x ~ 30x
  58.     if (200 <= code && code < 400) {
  59.         return res;
  60.     } else {
  61.         return Promise.reject(res, config);
  62.     }
  64.     // return false;
  65.     // return Promise.reject('is error')
  66. }, (err, config) => {
  67.     console.error('is global response fail interceptor');
  68.     console.error('err: ', err)
  69.     console.error('config: ', config)
  70.     const { errMsg, data } = err;
  72.     return Promise.reject({ errMsg, data, config });
  73. });

5.请求对象的参数

普通请求

参数 类型 必填 默认值 说明
url String 是 填写相对地址或者绝对地址
method String get 请求类型
data Object 请求的参数
header Object 请求的header，会和全局的header进行合并，优先级大于全局
params Object 设置QueryString

get方法中data和params具有同样的效果，但data优先级大于params

上传、下载

参数 类型 必填 默认值 说明
url String 是 填写相对地址或者绝对地址
method String get 请求类型
header Object 请求的header，会和全局的header进行合并，优先级大于全局
params Object 设置QueryString
onProgressUpdate Function 与官方相同
onHeadersReceived Function 与官方相同、注意兼容问题
offProgressUpdate Function 与官方相同、注意兼容问题
offHeadersReceived Function 与官方相同、注意兼容问题

上传

参数 类型
files Array
fileType String
filePath String
name String
formData Object

是否必填、说明、平台差异说明，与官方相同

6.如何使用

挂载到全局上

把插件挂载到全局则无法使用局部拦截器，可以自由取舍
1.挂载到 global 对象上
main.js

  1. import Request from './plugins/request/js/index'
  3. global.$http = Request();
  1. global.$http.request({
  2.     url: '/test/get/400',
  3.   method: 'get',
  4.   params: {
  5.     name: 'xxx',
  6.     age: 20
  7.   },
  8. }).then(res=>{
  9.     // do something...
  10. }).catch(err=>{
  11.     // do something...
  12. })

2.挂载到 vue 的原型上
main.js

  1. import Vue from 'vue'
  2. import Request from './plugins/request/js/index'
  4. Vue.prototype.$http = Request();
  1. this.$http.request({
  2.     url: '/test/get/400',
  3.   method: 'get',
  4.   params: {
  5.     name: 'xxx',
  6.     age: 20
  7.   },
  8. }).then(res=>{
  9.     // do something...
  10. }).catch(err=>{
  11.     // do something...
  12. })

⭐把api抽离成单独的文件

/api/xxxx.js

  1. import Request from '../plugins/request/js/index';
  3. export default {
  4.     // get 请求, 200 响应码
  5.     getMockDataMethodGet200 () {
  6.         let r = Request();
  8.         let reqId = r.interceptors.scoped.request.use(config => {
  9.             console.log('is scoped request')
  11.             return config;
  12.             // return false;
  13.             // return Promise.reject('xxx')
  14.         }, err => {
  15.             console.error('scoped request: ', err)
  17.             // return Promise.reject(err)
  18.             return false;
  19.         });
  21.         let repId = r.interceptors.scoped.response.use((res, config) => {
  22.             console.log('is scoped response')
  24.             return res;
  25.             // return false;
  26.             // return Promise.reject('xxx')
  27.         }, err => {
  28.             console.error('scoped response: ', err)
  30.             return Promise.reject(err)
  31.         });
  33.         // 卸载 私有 请求 拦截器
  34.         // instance.interceptors.scoped.request.eject(reqId)
  36.         let instance = r.request({
  37.             url: '/test/get/200',
  38.             method: 'get',
  39.             header: {
  40.                 // sid: 'xx',
  41.                 ContentType: "application/json"
  42.             },
  43.             params: {
  44.                 name: 'xxx',
  45.                 age: 20
  46.             },
  47.             data: {
  48.                 text: 'method type is get'
  49.             }
  50.         });
  52.         // 超时1500ms就中断请求
  53.         setTimeout(() => {
  54.             r.abort(instance)
  55.         }, 1500);
  57.         return instance;
  58.     },
  60.     // get 请求, 400 响应码
  61.     getMockDataMethodGet400 () {
  62.         return global.$http.request({
  63.             url: '/test/get/400',
  64.             method: 'get',
  65.             params: {
  66.                 name: 'xxx',
  67.                 age: 20
  68.             },
  69.         })
  71.         // return Request().request({
  72.         //     url: '/test/get/400',
  73.         //     method: 'get',
  74.         //     params: {
  75.         //         name: 'xxx',
  76.         //         age: 20
  77.         //     },
  78.         // });
  79.     },
  81.     // post 请求， 200 响应码
  82.     getMockDataMethodPost200 () {
  83.         return Request().post('/test/post/200', {
  84.             data: {
  85.                 name: 'xx',
  86.                 age: 20,
  87.             }
  88.         })
  89.     },
  91.     // download, 200 状态码
  92.     getMockDataMethodDownload () {
  93.         const r = Request();
  95.         return r.get('/test/download')
  96.             .then(res => {
  97.                 console.log('is then', res);
  98.                 return res.data.data.img;
  99.             })
  100.             .then(path => r.download(path, {
  101.                 params: {
  102.                     a: 'is a'
  103.                 },
  104.                 onProgressUpdate (res) {
  105.                     console.log(res)
  106.                 }
  107.             }))
  108.     },
  110.     // upload, 200 状态码
  111.     getMockDataMethodUpload (path) {
  112.         let r = Request()
  114.         let instance = r.upload('/test/upload', {
  115.             name: 'file',
  116.             filePath: path,
  117.             header: {
  118.                 contentType: "multipart/form-data"
  119.             },
  120.             formData: {
  121.                 text: 'is upload file'
  122.             },
  123.             onProgressUpdate (res) {
  124.                 console.log(res)
  125.             }
  126.         });
  128.         // 5s 之后还没上传完成就中断上传，会进入 catch 回调中
  129.         setTimeout(() => {
  130.             r.abort(instance)
  131.         }, 5000)
  133.         return instance;
  134.     }
  135. }

7.其他

已经给 header 中 content-type 属性名进行适配

支持以下名称

  1. 'content-type', 'Content-type', 'Content-Type', contentType, ContentType

重新发送请求(刷新Token)

（v2.0.1) 新增
推荐下载demo查看

/api/token.js

  1. import Request from '../plugins/request/js/index';
  3. export default {
  4.     // 获取 模拟token
  5.     getMockToken (id) {
  6.         return Request().get('/test/token/get?id=' + id);
  7.     },
  9.     // 验证 模拟token，id为 2460392754 则 success，code 200， 否则 fail code 为 401
  10.     checkMockToken (token) {
  11.         return Request().request({
  12.             url: '/test/token/check',
  13.             method: 'get',
  14.             params: { name: 'xxx' },
  15.             header: { token, uid: 'ux' },
  16.             count: 0 // 用来记录 每个实例请求的 请求次数（可以用来判断 重新发送请求的次数）
  17.         });
  18.     }
  19. }

config.js 文件

  1. import Request from './index';
  2. import TokenApi from '../.././../api/token' // 重新请求token的api
  4. globalInterceptor.response.use((res, config) => {
  5.     // 用code模拟http状态码
  6.     const code = parseInt(res.data.code);
  8.     if (200 <= code && code < 400) { // 20x ~ 30x
  9.         return res;
  10.     } else if (code == 401  && config.count === 0) {  // token 验证失败, 并且这个实例是第一次重复请求
  11.         config.count++;
  12.         config.url = config.instanceURL;
  13.         return getApiToken(2460392754).then(saveToken).then(() => Request().request(config))
  14.     } else {
  15.         return Promise.reject(res, config);
  16.     }
  17. }, (err, config) => {
  18.     console.error('is global response fail interceptor');
  19.     console.error('err: ', err)
  20.     console.error('config: ', config)
  21.     const { errMsg, data } = err;
  23.     return Promise.reject({ errMsg, data, config });
  24. });
  26. // 重新请求更新获取 token
  27. async function getApiToken (uid) {
  28.     const res = await TokenApi.getMockToken(uid);
  29.     const { token } = res.data;
  31.     return token;
  32. }
  34. // 保存 token 到 localStorage
  35. function saveToken (token) {
  36.     uni.setStorageSync('token', token);
  37. }

8.问题

重新发送请求

Q: 需要使用 “重新发送请求”的功能，并且同时也需要使用 “中断请求” Request().abort() ，会出现中断的请求不是 初次发送的，而是在正在运行的重复请求。
A: 暂时没法解决这个问题。如果可以就使用拦截器替代这个功能。

9.疑问

1.拦截器是什么、有什么用、怎么运行的

Q:是什么？
A:axios里功能的一部分，能够帮助解决一些重复性的问题

Q:有什么用？
A:

  • 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
  • 响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页、根据http状态码或者自定义code做出一些异常拦截并自定义错误信息、数据过滤等。

Q:怎么运行的?
A:查看运行流程图

2.为什么会发送options请求、为什么会跨域、什么是cors

header中设置其他特殊字段，或者content-type设置为json或其他类型，就会先发送 options 请求进行与服务器验证，验证失败就会出现跨域问题。

cors的全名叫做跨域资源共享，一般的简单请求是不会触发cors，设置了一写特殊字段就会先发送 options 请求了。在服务端配置一些数据就可以通过验证了。（怎么解决这个问题问后端，不行再google）

文档
mdn的options介绍
mdn的cors介绍

3.为什么没有添加cookie功能

注意非 H5 端不支持 cookie，服务器应避免验证 cookie。如果服务器无法修改，也可以使用一些模拟手段，比如这样的工具https://github.com/charleslo1/weapp-cookie 按照 W3C 规范，H5 端无法获取 response header 中 Set-Cookie、Set-Cookie2 这2个字段，对于跨域请求，允许获取的 response header 字段只限于“simple response header”和“Access-Control-Expose-Headers”（详情）

这段话来自于uniapp官网
(主要我也不想再踩坑了）

4.为什么有些axios的功能或者属性没有实现

1.目前这个插件已经能够满足绝大部分了
2.axios的有些功能我也没有用过
3.uniapp的封装限制、或者运行环境限制

5.为什么不根据自己需求造一个轮子，而是要根据axios的源码进行重构

如果大家有时间，我还是比较推荐去阅读一下axios的源码。第一，可以了解axios的运行原理；第二，也可以提升自己。回到问题，我上个版本的插件其实已经到达难以维护和阅读的状态了，所以我想根据一些优秀的插件学习封装技巧和原理并且重构一份，这样也可以尽量降低其他开发者使用此插件的学习成本。

6.为什么要把一个插件拆分成多个文件

这样易于代码的维护和阅读

7.为什么不支持回调函数了，只支持Promise

1.js的es6出来到现在已经好几年了，需要与时俱进
2.多次嵌套使用回调函数真的很难维护和阅读代码！.

8.为什么demo能过正常运行，copy到自己的项目里却运行不了

1.可能是插件的引用路径问题
2.config.js 里有一些默认的demo没有删除或者注释掉
3.拼错单词
4.不知道该如何使用

9.为什么要用皮卡丘作为头像或者封面

因为可爱

最后

出现bug了？
遇到无法解决的问题？
直接加我q或者发邮件也行

email: 2460392754@qq.com
qq: 2460392754

欢迎交流或探讨问题！

喜欢插件的，可以给插件一个5⭐好评吗

土豪老板也可随意打赏

mm_reward_qrcode_1571378923544 _200.png