使用教程示例详细解释vue拦截器

二次打包axios，根据参数实现多次拦截多个请求

1.创建一个新的axiosTool.js文件，并设置请求拦截和处理的逻辑

从“vue”导入某视频剪辑软件从“axios”/导入axios/取消请求让CancelToken=axios .CancelToken//设置默认请求头，如果不需要可以取消这一步axios。默认值。标头={ ' X-Requested-With ' : ' XMLHttpRequest ' }//请求超时的时间限制axios.defaults.timeout=20000/开始设置请求发起的拦截处理//配置代表发起请求的参数的实体axios。拦截器。请求。使用(配置={//得到参数中的requestName字段，用于决定下次发起请求，取消对应的相同字段的请求//如果没有requestName就默认添加一个不同的时间戳让请求名称if(配置。方法==' post '){ if(config。数据配置。数据。请求名称){请求名称=配置。数据。请求名称} else {请求名称=新日期().getTime()} } else { if(config。参数配置。参数。请求名称){请求名称=配置。参数。请求名称} else {请求名称=新日期().getTime() } } //判断，如果这里拿到的参数中的requestName在上一次请求中已经存在，就取消上一次的请求if(请求名称){ if(axios[请求名称]axios[请求名称]).取消){ axios[requestName].cancel()}配置。CancelToken=new CancelToken(c={ axios[请求名称]={ axios[请求名称]).取消=c }) }返回配置},错误={返回承诺。拒绝(错误)})//请求到结果的拦截处理axios。拦截器。回应。使用(配置={//返回请求正确的结果返回配置}, 错误={ //错误的请求结果处理，这里的代码根据后台的状态码来决定错误的输出信息if(错误。错误。响应){ switch(错误。回应。状态){ case 400: error.message='错误请求中断案例401:错误。消息='未授权，请重新登录中断案例403:错误。消息='拒绝访问中断案例404:错误。消息='请求错误，未找到该资源中断案例405:错误。消息='请求方法未允许中断案例408:错误。消息='请求超时中断案例500:错误。消息='服务器端出错中断案例501:错误。消息='网络未实现中断案例502:错误。消息='网络错误中断案例503:错误。消息='服务不可用中断案例504:错误。消息='网络超时破箱505:错误。消息='http版本不支持该请求打破默认：错误。错误.消息=连接错误$ { error . response . status } ` } } else { error . message='连接到服务器失败}返回答应我。拒绝(错误。消息)})//将爱可信的邮政方法，绑定到某视频剪辑软件实例上面的$ PostVue。原型。$ post=函数(URL，参数){返回新的Promise((解析，拒绝)={ axios.post(url，params)).然后(res={ resolve(res) }).catch(err={ reject(err)})}//将爱可信的得到方法，绑定到某视频剪辑软件实例上面的$ GetVue。原型。$ get=函数(URL，参数){返回新的Promise((解析，拒绝)={ axios.get(url，{ params: params }).然后(res={ resolve(res) //返回请求成功的数据数据})。catch(err={ reject(err)})}//请求示例//requestName为多余的参数作为请求的标识，下次发起相同的请求，就会自动取消上一次还没有结束的请求//比如正常的请求参数只有一个名称： '123 ',但是这里我们需要额外再加上一个requestName/**此$post(url，{ name: '123 '，requestName: 'post_1' }).然后(RES={ console . log(` 0请求成功：$ { RES } `) })*/导出默认axios2 .再main.js中引入该文件

从""导入{ axios } ./static/js/axiosTool'3 .在组件中直接使用即可

这个。$ post(这个。url2，{name:' king '，doctype :' pson '，requestname3360' name02'})。然后(res={console。log (res)})这个。$ get(这个。url，{name:' Li '，requestname:' name01'})。然后(RES={console.log (RES)}) 4。效果如图所示：

摘要

以上是边肖介绍的使用vue拦截器的例子的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！