vue.js 之 axios拦截器

本文抄自https://www.jianshu.com/p/a0c67f4e145e
笔者只是用于加深自己的记忆，故抄之。大家可以看原作者。

1. 在src目录下创建api目录，在api目录创建一个js文件

import axios from 'axios'   //引入axios
//下面这两个不一定需要引入，看项目本身，但拦截器一般都会伴随这某种缓存机制使用，如：vuex的store
import store from '@/store/index'  //引入vuex的store
import router from '@/router'   //引入vue的路径管理router

2. 创建一个axios实例

let instance = axios.create({
// 设置统一的请求头
  headers: {
    'content-type': 'application/x-form-urlencoded'
  }
})

3. 编写请求拦截器

这个拦截器会在你发送请求之前运行
我的这个请求拦截器的功能是为我每一次请求去判断是否有token，如果有token存在则在请求头上加这个这个token。后台来判断这个token是否过期。

//http request 拦截器
instance.interceptors.request.use(
  config => {
    if(store.state.token){ //判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.authorization = atore.state.token //请求头上加token
    }
    return config;
  },
  err => {
     return Promise.reject(err); 
  }
)

4. 响应拦截器

// http response 拦截器
instance.intercepyors.response.use(
  response => {
    //拦截响应，做统一处理
    if(response.data.code){
      switch(response.data.code){
        case 1002:
          store.state.isLogin = false;
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return response;
  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
    return Promise.reject(error.response.status)  //返回接口返回的错误信息
  }
)

5. 最后把实例导出就行了

export default instance

在需要的页面导入就可以使用了

import instance from './axios'

// 验证登录
export funtion handleLogin (data) {
  return instance.post('/ds/user/login',date)
}

到此就完成了一个简单的请求响应的拦截器，流程就是这么个流程，大家可以自行扩充功能，总之拦截器的用处是十分广的。