目录vue请求拦截器和响应拦截器用法请求拦截器响应拦截器使用axios请求拦截器和响应拦截器如何使用？
总结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， 命名为service
2.先写请求拦截器的逻辑代码
//请求拦截器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总结以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue 请求拦截器的配置方法详解vue axios拦截器常用之重复请求取消Vue封装Axios请求和拦截器的步骤vue路由拦截器和请求拦截器知识点总结vue axios登录请求拦截器