在实际开发中,可能会遇到网络问题或者查询量比较大的情况,上一个请求还没有完成,用户就发起了下一个请求。
会造成什么情况呢?
但是同一个请求多次发送到服务器,无疑是对服务器的一种压力,所以需要在已经优化服务器过查询速度后,以及用户网络情况比较差的条件下,在前端进行请求限制。
axios 自带的cancelToken可以帮我们实现这个需求,并且提供给了我们一个现成的api axios.CancelToken ,这是一个返回值是带有请求信息的回调函数,我们可以在需要cancel的时候去执行这个回调函数。具体实现如下:
const service = axios.create({});
const penddingMap = new Map();
const addPendding = (config) => {
config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
if(!penddingMap.has(config.url)){
penddingMap.set(config.url,cancel);
}
})
}
const removePendding = (config) => {
if(penddingMap.has(config.url)){
let cancel = penddingMap.get(config.url);
cancel(config.url);
penddingMap.delete(config.url)
}
}
本地维护一个Map来存储每个请求信息, addPendding 中每次会去先判断是否有cancelToken,如果有就不用重新创建一个cancelToken。 removePendding 中判断请求信息是否在Map中,如果该请求存在于Map中,则执行cancel函数,并删除Map中的该请求。
拦截器中的具体应用:
service.interceptors.request.use(config => {
removePending(config) // 如果存在Map中先cancel该请求
addPendding(config) // 添加该请求到Map中
return config
})
service.interceptors.response.use(response => {
``` // some code
return response.data
},error => {
// 捕获cancel请求并抛出
if(error instanceof Cancel){
error.message = '上一请求尚未结束,稍等~';
Message.error(error.message);
return Promise.reject(error.response)
// 这里抛出需要注意,在请求时调用try-catch进行捕获
})
)
这里拦截成功后,就可以限制住大流量的多次请求。
这里只是一个例子,也可以通过判断按钮逻辑来控制用户是否发起请求。
作者:Tzyito
链接:https://juejin.cn/post/6987673995541741575
来源:掘金
axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击
axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios中get/post/put/patch请求。传参格式为 formData ,传参格式为 query 形式 ,传参格式为 raw等
axios-mock-adapter可以用来拦截http请求,并模拟响应,使用起来也很简单,比如你想模拟下服务器返回个500错误,什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等,你都能模拟出来
分享下我自己的axios封装,axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建文件夹 service / index.js,接着上代码
最近做项目遇到一款浏览器,由于缓存了get请求,导致不管如何刷新,数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数,value为时间戳
发送请求模块目录,@/api/url中存放的是每个模块的URL,使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入,并整理出一个对象。整合common.js & product.js,最终得到的对象如下:
axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数
在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下:这样的话,我们在各个组件中进行请求时
项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!