vue-axios-optimize使用说明

vue-axios-optimize是一个对axios请求优化的vue插件包，引入此包之后，并进行相关配置，即可轻松实现全局请求加载动画，重复请求时取消前面的请求或者阻止后面的请求，并且可实现请求并发数量控制以及接口缓存。 可阅读此文章 了解

安装

# npm
npm install vue-axios-optimize --save
# yarn
yarn add vue-axios-optimize --save
# pnpm
pnpm add vue-axios-optimize --save

axios版本

axios版本建议大于0.27.2 ， 作者测试版本为 "^0.27.2"、"^1.3.4"

引入

在src/api目录下新建axios-optimize.js文件

api目录大致如下

src

api

modules

common-api.js

index.js

axios.js

axios-optimize.js

new axiosOptimize(axios, instance, options）参数说明

| 参数 | 说明 | 来源 | | -------- | ------------------------- | ------------------------------------- | | axios | 安装axios中的axios | import axios from 'axios' | | instance | 创建好的axios实例，已经配置好请求头等相关内容 | import instance from '@/api/axios.js' | | options | 一些配置，详情继续阅读文档 | 自定义配置 |

特别注意

vue2项目的vue.config.js 需要添加如下配置，对插件包进行编译。

module.exports = {
    ...
  transpileDependencies: [
    "vue-axios-optimize"
  ],
  	...
}

总结

如有疑问，可关注微信公众号【爆米花小布】进行咨询。

打赏

微信公众号【爆米花小布】，抖音号【爆米花小布】 更多好玩的插件 vue2-element-dict字典包插件使用文档

vue2-element-dict字典包插件

vue3-element-dict字典包插件使用文档

vue3-element-dict字典包插件

vue2-vant-dict移动端字典包插件使用文档

vue2-vant-dict移动端字典包插件

vue3-van3-dict移动端字典包插件

vue3-water-marker水印插件

vue2-water-marker水印插件

更新日志

3.0.0

1. 【优化】无感知续签AccessToken时无需配置多余请求头
2. 【修改】accessToken配置改为authorizationKey，且默认值由accessToken改为authorization
3. 【修改】setAccessTokenFun配置改为setAuthorizationFun
4. 【修改】getAccessTokenFun配置改为getAuthorizationFun
5. 【修改】默认最大高并发数量由原来的4改为6
6. 【优化】responseTypesStr新增默认配置 "arraybuffer,blob"
7. 【优化】请求上的配置showIsComplete配置值即为多返回的字段名称，表示此接口已全部请求完毕

2.1.1

1. 【fix】修复get请求和delete请求配置fullPath参数为 true时，会报错的bug

2.1.0

1. 【优化】新增timeout配置，实现缓存数据时的伪加载时间，从缓存中获取数据时会触发 showLoadingFun， timeout毫秒后会执行hideLoadingFun

2.0.9

1. 【修复】修复请求链接相同时，请求方式不同也会被当做同个请求的问题。

2.0.8

1. 【优化】新增showIsComplete参数，实现只有配置了才在请求返回数据中添加 IS_COMPLETE 是否请求完成字段。

2.0.6

1. 【优化】新增removeRemainingTasksWhenError参数，实现当某个请求报错时，尽可能的阻止剩余未发起的请求。

2.0.5

1. 【修复】接口报错时，原封不动reject返回原始数据

2.0.3

1. 【修复】修复缓存接口时，取消重复请求，页面逻辑代码的catch不执行的问题

2.0.2

1. 【功能】阻止重复请求的代码逻辑变更
2. 【功能】无感知刷新token的代码逻辑变更
3. 【修复】配置高并发请求数量后，取消请求存在取消不了的情况
4. 【优化】配置接口缓存后，新增可删除接口缓存的功能
5. 【注意】options配置变化，及接口捕获异常处的逻辑判断

2.0.1

1. 【功能】实现接口缓存配置 options新增配置 cacheNum 配置最大缓存数量, 接口配置处可配置 cache: true。 注意：如下几种情况不建议配置缓存
   1. 表单提交的接口
   2. 数据频繁更新的接口
   3. 删除数据接口

2.0.0

1. 【功能】实现并发请求数量控制，options新增maxReqNum参数配置 默认值为 4 ，表示同时可请求4个接口，剩余的接口陆续排队
2. 【优化】当接口返回数据格式为对象格式时，会多添加一个 IS_COMPLETE 表示当前全部请求任务是否已完成
3. 【调整】2.0.0版本 axios-optimize.js 文件不暴露 instance实例，且接口调用方法仅 支持 .get .post .delete .patch .put 形式调用， 具体查看文档示例

1.0.8

1. 【优化】废除options的setAccessTokenFun配置项
2. 【优化】将返回数据的config去除

1.0.6

1. 【优化】废除options的formatAccessTokenFun配置项
2. 【优化】refreshTokenStore由原来的resolve接口返回的数据，改为resolve(accessToken)

1.0.5

1. 【优化】修复部分检查代码比较严格的时候 会报 responseType 未定义的错误的问题

1.0.3

1. 【优化】修复部分检查代码比较严格的时候 会报 noShowLoading 未定义的错误的问题

1.0.2

1. options新增responseTypesStr配置项，字符串类型，多个时使用英文逗号隔开,此返回类型的数据直接返回原有数据的data数据。在axios.js原封装函数中返回原始的响应返回数据。解决文件类型数据时不可用的问题

1.0.1

1. 修复单词错误问题 isPervent 修改为 isPrevent

1.0.0

1. 初始版本