axios拦截器

最近在项目中要用到拦截器，坦白说是第一次据说这玩意，因此资料查了很久，如今也算是明白了拦截器的做用。个人理解就是拦截每一次你的请求和响应，而后进行相应的处理。好比一些网站过了必定的时间不进行操做，就会退出登陆让你从新登录页面，每次请求带上token之类的功能

在src目录下的api目录建立一个js文件

import axios from 'axios'  //引入axios
//下面这两个不必定须要引入，看你项目须要拦截的时候作什么操做，可是通常都须要引入store
import store from '@/store/index'  //引入store
import router from '@/router'  //引入router
复制代码

建立一个axios实例

let instance = axios.create({
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
})
复制代码

编写请求拦截器

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

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

响应拦截器

// http response 拦截器
instance.interceptors.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) // 返回接口返回的错误信息
  })
复制代码

最后把实例导出就好了

export default instance
复制代码

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

import instance from './axios'

/* 验证登录 */
export function handleLogin (data) {
  return instance.post('/ds/user/login', data)
}
复制代码