Vue添加请求拦截器及vue-resource 拦截器使用(vue拦截器使用场景)

编辑：rootadmin

推荐整理分享Vue添加请求拦截器及vue-resource 拦截器使用(vue拦截器使用场景)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue请求拦截和响应拦截的详解,vue axios请求拦截,vue请求全局http拦截,vue拦截器使用场景,vue响应拦截,vue在路由拦截请求接口,vue请求拦截器写在哪儿,vue 请求拦截,内容如对您有帮助，希望把文章链接给更多的朋友！

一、现象

统一处理错误及配置请求信息

二、解决

1、安装 axios , 命令： npm install axios --save-dev

2、在根目录的config目录下新建文件 axios.js ，内容如下：

3、在main.js中进行引用，并配置一个别名（$ajax）来进行调用:

如图：

Vue添加请求拦截器及vue-resource 拦截器使用(vue拦截器使用场景)

4、应用，一个登录的post如：

ps：下面看下vue-resource 拦截器使用

在vue项目使用vue-resource的过程中，临时增加了一个需求，需要在任何一个页面任何一次http请求，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那么会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢？答案是有的!

vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后，如果设置了拦截器如下，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给

then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断，来决定是跳转到登录页面还是留在当前页面继续获取数据。

下边代码添加在main.js中

在知道此方法之前，鄙人想了一个笨方法，但是也能在一定程度上降低修改工作量。方法是为Vue绑定一个this.$$http.get方法取代this.$http.get方法，每个页面的http请求添加个$在$http前即可。

总结

以上所述是小编给大家介绍的Vue添加请求拦截器及vue-resource 拦截器使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

vue 文件目录结构详解项目简介基于vue.js的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用ESNext、scss等最新语言特性。项目包含：基础库:vue.js、vue-route

浅谈Angular文字折叠展开组件的原理分析自己写了个Angular的文字折叠组件，这种组件其实很多地方都能用到效果如下展开后的效果折叠后的效果先放全部代码，使用的时候只需要把自己需要展

浅谈vue-cli加载不到dev-server.js的解决办法在使用vue开发过程中，难免需要去本地数据地址进行请求，而原版配置在dev-server.js中，新版vue-webpack-template已经删除dev-server.js，改用webpack.dev.conf.js代替

标签: vue拦截器使用场景

本文链接地址:https://www.jiuchutong.com/biancheng/378887.html 转载请保留说明！

上一篇：详解vue项目的构建，打包，发布全过程(vue项目简介)