Vue中的请求拦截器和响应拦截器用法及说明
作者：小白在线学前端
vue请求拦截器和响应拦截器用法
今天就讲一下什么是请求拦截器，和请求拦截器的作用，好了，多余的话我就不说了，马上开始今天的讲解
开始啦
请求拦截器
请求拦截器的作用是：
在请求发送前进行一些操作，例如在每个请求体里面加上token,统一做了处理的，如果要更改也是非常的容易。
关于拦截
这里只说原理，前端的请求，最终离不开Ajax,像Vue的Vue-Resource、Axios,都只是对Ajax进行了统一的封装，它暴露出来的拦截器，其实就是写了一个方法，把Ajax写在这个方法里面（我们先说请求拦截器），在执行的时候，先将请求时要添加给请求头的那些数据（Token、后端要的加密的密码）先执行一遍，都赋值给一个变量，然后再统一传给Ajax，接下来，就是执行Ajax，这就是所谓的请求拦截器，其实就是先执行要添加的数据，然后再执行Ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器了
// 请求超时时间
axios.defaults.timeout = 120000
// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 判断是否存在token，如果存在将每个页面header都添加token
if (window.sessionStorage.getItem('DT')) {
// 请求头配置全局token
config.headers.DT = window.sessionStorage.getItem('DT')
}
return config
},
err => {
// 对请求错误做些什么
Vue.prototype.$message.error('请求超时')
return Promise.reject(err)
}
)响应拦截器
响应拦截器的作用就是
在接收到响应后再进行一些操作，例如在服务器返回登录状态失效的时候，需要重登录，跳转到登录页面，
响应拦截器，就是是在请求结果的返回后的同时，先不直接导出，而是先对响应码等等的进行处理，处理好之后再导出给页面，如果将这个对象响应码的处理过程抽出来，就成了所谓的响应拦截器
代码如下
// 响应拦截器
axios.interceptors.response.use(
response => {
// res是响应的结果
switch (response.data.code) {
case 401:
// 登录失效
// 响应成功的拦截
console.log('响应拦截器：')
// console.log(response.data)
Vue.prototype.$message.error(response.data.message)
sessionStorage.removeItem('DT')
router.push('/login')
break
case 404:
if (response.data.message !== null) {
Vue.prototype.$message.error(response.data.message)
} else {
Vue.prototype.$message.error('未知错误')
}
break
case 500:
// 错误
if (response.data.message !== null) {
Vue.prototype.$message.error(response.data.message)
} else {
Vue.prototype.$message.error('未知错误')
}
break
default:
return response
}
return response
},
err => {
if (err.response.data.message) {
Vue.prototype.$message.error(err.response.data.message)
return Promise.reject(err.response.data.message) // 返回接口返回的错误信息
} else {
// 返回状态码不为200时候的错误处理
Vue.prototype.$message.error(err.toString())
return Promise.resolve(err)
}
}
)页面中请求接口时：
// 用户登录提交
login() {
// debugger
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return
if (valid) {const userInfo = {
username: this.loginForm.username,
password: this.loginForm.password
}
// 登录之前去除token
window.sessionStorage.removeItem('DT')
const { data: res } = await this.$http.post('/system/login', userInfo)
if (res.code !== 200) {
this.initCaptcha()
return
}
this.$message.success('登录成功')
window.sessionStorage.setItem('DT', res.result.token)
this.$router.push('/main')
}
})
}心得：
- 请求拦截器：其实就是先执行要添加的数据，然后再执行Ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器了
- 响应拦截器：就是是在请求结果的返回后的同时，先不直接导出，而是先对响应码等等的进行处理，处理好之后再导出给页面，如果将这个对象响应码的处理过程抽出来，就成了所谓的响应拦截器
使用axios请求拦截器和响应拦截器
在使用一些前后端会话时，需要在请求头中携带一些特殊请求头，这样，就需要设置请求拦截器和响应拦截器
开发项目时，由于后端使用了token令牌，登录后在前端保存，然后每次请求都要携带token，将这些配置写在main.js文件中是很乱的不易于阅读，额外配置了axios请求配置模块 这样在以后对于请求响应都能更好的配置而不会影响其他配置
如果不使用请求拦截，那么对每一条请求每一个状态都要特殊处理，如果请求特殊状态有数十个，每个页面有很多请求，那么页面会变得很长很臃肿，不好维护。
如何使用？
1.在utils文件夹中创建 一个request.js文件
文件内容为（这里必须export这个配置后，才能被）：
const service = axios.create({
timeout: 6000 //请求超时为6秒
}); //创建一个axios， 命名为service2.先写请求拦截器的逻辑代码
//请求拦截器
service.interceptors.request.use(function(config) {
// 处理请求之前的配置
//在请求头headers加入token校验
config.headers["token"] = "aded434088c7bcc595ec1c36c24aea1c"
return config
}, function(error) {
// 请求失败的处理
return Promise.reject(error);
});3.接着写响应拦截器的逻辑代码
service.interceptors.response.use(function (response) {
// 在接收响应做些什么，例如跳转到登录页
......
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});4.在统一管理的接口文件api.js使用
5.移除拦截器的方法
axios.interceptors.request.eject(service); //service为第一步中创建的axios
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。