vue中的请求拦截器与响应拦截器的使用

之前讲到在项目中封装了axios，vue中对axios封装 就有了request.js这个文件，那么在这个文件中就可以写请求拦截器与响应拦截器。

请求拦截器：
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，每次请求携带token传给后端，统一做处理。

响应拦截器：
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态token失效，需要重新登录的时候，跳转到登录页，对不同状态码做不同处理。

request.js

import axios from 'axios'

//初始化axios
const service = axios.create({
  baseURL: '请求地址',
  withCredentials: true, //跨域请求时发送cookies
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  // timeout: 10000 // 请求超时
})

//请求拦截器
service.interceptors.request.use(
  config => {
    // 判断是否存在token,把token添加点请求头中，每次请求携带token传给后端
    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    //处理错误请求
    return Promise.reject(error)
  }
)
//响应拦截器
service.interceptors.response.use(
    response=> {
        const res = response.data
        if (res.code !== 200) {
            //请求失败（包括token失效，302，404...根据和后端约定好的状态码做出不同的处理）
            return res
        }else{
            //请求成功
            return res
        }
    }
    return config
  },
  error => {
    //处理错误响应
    return Promise.reject(error)
  }
)
 
export default service