vue的请求拦截器,vue router 拦截器
本文主要介绍了vue资源拦截器的拦截器使用的详细说明。在文章中通过示例代码非常详细，对大家的学习或者工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
前言
拦截器-interceptor
在一些现代前端框架上，拦截器基本上是一个非常基础但又非常重要的环节。比如Angular原生支持拦截器配置，VUE的Axios模块也为我们提供了拦截器配置。那么拦截器到底是什么，有什么用途？
拦截器能帮助我们解决的
添加的统一请求的参数
例如，在标题中添加X-Requested-With。例如，客户端需要实现签名和令牌的认证机制。比如你可以写$ http.get (/files ，params)，拦截器会像http://www.xxxx.com/1/files.一样帮你拼接请求地址
处理统一响应错误
比如重新连接机制，获取error.code错误代码重新连接，如令牌过期，再次获取令牌，再次发送请求。
例如，通过统一报告错误信息来提示所有返回的404将会很酷。
在使用vue-resource异步加载vue项目的过程中，需要在任何页面的任何http请求过程中增加对令牌过期的判断。如果令牌已经过期，您需要跳转到登录页面。如果要在每个页面的http请求操作中加入一个判断，那将是一个非常大的修改工作量。那么vue-resource是否有一个针对任何请求响应而捕获的公共回调函数呢？答案是肯定的！
拦截器vue-resource的拦截器是满足这一需求的神奇解决方案。每次http请求响应后，如果设置了拦截器，会先执行拦截器函数获取响应体，然后再决定是否将响应返回给then进行接收。然后我们可以在这个拦截器中加入对响应状态码的判断来决定是跳转到登录页面还是停留在当前页面继续获取数据。
安装与引用
NPM: npm安装vue-资源-保存-开发
/*介绍Vue框架*/
从“vue”导入Vue
/*介绍资源请求插件*/
从“vue-resource”导入VueResource
/*使用VueResource插件*/
使用(VueResource)
main.js中添加了以下代码
vue . http . interceptors . push((request，next)={
Console.log(this)//这里是请求所在页面的Vue实例。
//修改请求
request.method= POST//一些预处理和配置可以在请求之前完成
//继续到下一个拦截器
接下来((response)={//在响应之后、传递给then之前，修改并逻辑判断响应。这里增加了令牌已经过期的判断，页面中的任何http请求都会先调用这里的方法。
response.body= . ；
返回响应；
});
});
拦截器实例
(1)向请求添加加载效应
使用inteceptor，我们可以为所有请求处理添加一个加载：在发送请求之前显示加载，在收到响应之后隐藏加载。
具体步骤如下：
//1，添加一个加载组件。
模板id=加载模板
div class=加载-覆盖/div
/模板
//2.将加载组件作为另一个Vue实例的子组件。
var help=new Vue({
艾尔： #救命，
数据：{
showLoading: false
},
组件：{
正在加载:{
模板： #loading-template ，
}
}
})
//3.将Vue实例挂载到HTML元素中。
div id=help
正在加载v-show= show loading /正在加载
/div
//4.添加一个内部接收器。
vue . http . interceptors . push((request，next)={
loading.show=true
下一步((响应)={
loading.show=false
返回响应；
});
});
然而，当用户停留在屏幕上太长时间时，视图数据可能不是最新的。此时，如果用户删除或修改了某条数据，如果这条数据已经被其他用户删除，服务器会反馈404错误。但是，因为我们的put和delete请求不处理errorCallback，所以用户不知道他的操作是成功还是失败。这个问题也可以通过inteceptor解决。
(2)为请求添加一个通用的错误处理方法。
//1.继续使用上面的加载组件，并在#help元素下添加一个对话框。
div id=help
正在加载v-show= show loading /正在加载
模式对话框：show=showDialog
header class= dialog-header slot= header
h3 class=dialog-title 服务器错误/h3
/页眉
div class= dialog-body slot= body
糟糕，服务器有一些错误，错误代码：{{errorCode}}。/p
/div
/modal-dialog
/div
//2.向帮助实例的数据选项添加两个属性。
var help=new Vue({
艾尔： #救命，
数据：{
showLoading: false，
showDialog: false，
错误代码：“”
},
组件：{
正在加载:{
模板： #loading-template ，
}
}
})
//3.修改内部接收器
vue . http . interceptors . push((request，next)={
help.showLoading=true
下一步((响应)={
如果(！response.ok){
help . error code=response . status；
help.showDialog=true
}
help.showLoading=false
返回响应；
});
});
关于vue-resource interceptor拦截器使用的详细说明，本文就到这里了。有关vue-resource interceptor的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。