axios 拦截器

这是我参与更文挑战的第5天，活动详情查看： 更文挑战

拦截器分为 request请求拦截器 和 response响应拦截器，建立 axios 实例后，可配置请求拦截器

axios 基础使用及配置

请求拦截

在请求发送前统一执行某些操做，经常使用在请求头中处理token等

var instance = axios.create({
  timeout: 60000,
  withCredentials: true
})
// 请求拦截器
instance.interceptors.request.use(function (config){
    // 在发送请求以前能够作一些事情
     config.headers.token = 'token'   //在headers中携带token
     return config
}，function (error){
    // 处理请求错误
    return Promise.reject(error)
})
复制代码

token 等 headers 信息处理也能够在 axios 实例建立后全局处理，大部分 api 的携带信息应该不会再改了

instance.defaults.headers.common["token"] = getCookie("accessToken")
instance.defaults.headers.common["SID"] = '3f25944323'
instance.defaults.headers.common["action"] = 'Server'
复制代码

除了 common 以外还有其余方法，这里一块儿列出来，方便后续须要处理时使用

instance.defaults.headers.common["token"] = "Token"
instance.defaults.headers.get[CSRFToken'] = "Token"
instance.defaults.headers.put['CSRFToken'] = "Token"
instance.defaults.headers.delete['CSRFToken'] = "Token"
instance.defaults.headers.patch['CSRFToken'] = "Token"
复制代码

响应拦截

在接收到服务器响应后统一执行某些操做，经常使用的是对各种状态码作统一处理

// 响应拦截器
instance.interceptors.response.use(
  // 请求成功业务处理
  response => {
    //拦截响应，作统一处理 
    if (response.status === 200 && response.data.request_id) {
      // 与后端协定好对应需求的返回值code，这里进行响应前处理
      if (response.data.code == 0) {
        return response.data;
      } else if (response.data.code == 1) {
        // 未登陆
        window.location.href = LOGIN_URL
      } else if (response.data.code == 2) {
        // 无权限
        router.push({ path: '/unauthorized' })
      } else if (response.data.code == 4) {
        // 未开通
        router.push({ path: '/buy' })
        return response.data;
      } else {
        // 错误信息
        let msg = response.data.msg
        Message.error({
          message: msg,
          duration: 3000,
          center: true,
          offset: 50,
          showClose: true
        })
        return Promise.reject(error)
      }
    }
    return response
  },
  //接口错误状态处理，接口未能正常返回数据的状况
  error => {
    // 对经常使用的错误状态码拦截处理，也可与后端协商特殊错误码
    if (error.response.status === 500) {
      Message.error({
        message: '服务器内部错误',
        duration: 3000,
        center: true,
        offset: 50,
        showClose: true
      })
      router.push({ path: '/errorpage' })
      return Promise.reject(error)
    }
    if (error.response.status === 404) {
      router.push({ path: "/undefined" })
      return Promise.reject(error)
    }
    if (error.response.status === 403) {
      store.dispatch("app/setServerError", "403")
      removeCookie("csrftoken")
      removeCookie("sessionid")
      router.push({ path: "/errorpage" })
      return Promise.reject(error)
    }
    if (error.response.status === 422) {
      // let msg= error.response.data.msg
      // 翻译后端返回的错误信息
      let msg = window.rootVueInstance.$i18n.t('Error.' + error.response.data.msg)
      Message.error({
        message: msg,
        duration: 3000,
        center: true,
        offset: 50,
        showClose: true
      })
      return Promise.reject(error)
    }
    if (error.response.status === 409) {
      let msg409 = '获取列表失败，请检查AK信息是否正确'
      return Promise.reject(error)
    }
    // ...
    return Promise.reject(error.response.status)
  })
复制代码

导出实例

export default instance
复制代码

axios 拦截器就配置好啦 ~