axios实例

简单版：

import axios from "axios";

//创建axios实例
const service=axios.create({
    baseURL:"https://www.fastmock.site/mock/f302c00ef36361999b48f34143540345/api",
    timeout:0,
    headers:{
        "Comtent-Type":"application/json;charset=utf-8"
    }
})
//请求拦截
service.interceptors.request.use((config)=>{
    config.headers=config.headers || {}
    if(localStorage.getItem('token')){
        config.headers.token=localStorage.getItem("token") || ''
    }
    return config
})

//响应拦截
service.interceptors.response.use((res)=>{
    const code:number=res.data.code
    if(code !=200){
        return Promise.reject(res.data)
    }
    return res.data
},(err)=>{
    console.log(err)
})

export default service

复杂版：

import axios from 'axios'
import { Message ,MessageBox} from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'


// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 20000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  console.log("store.getters")
  console.log(store.getters)
  if (store.getters.token) {
    config.headers['token'] = getToken()
    config.headers['userId']=store.getters.id
    config.headers[getToken()] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request erro
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
    const res = response.data
      // 50008:非法的token; 50012:其他客户端登录了;  401:Token 过期了;

      if (res.code === 401 || res.code === 50008 || res.code === 50012) {
       //alert('你已被登出，可以取消继续留在该页面，或者重新登录')
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload()// 为了重新实例化vue-router对象 避免bug
          })
        })
      //}
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service