二次封装axios拦截器 更方便处理前端接口请求

1. npm install axios -D

2. 在项目目录下新建request.js(文件名字可自行取,保留.js文件格式即可)

3. 引入vuex存储库  import store from '@/store'(这里不过多提store，如果不懂的小伙伴 可点击下方链接查询) 

vue官网文档

4 注解
/**

 * @param {string} process.env.VUE_APP_BASE_API

 */

5.//create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 12000 // request timeout //设置请求时长
})

6.// request interceptor
service.interceptors.request.use(
  config => {
    // Do something before request is sent
     if (store.getters.Token) {
      // 让每个请求携带token-- ['Token']为自定义key 请根据实际情况自行修改
       config.headers['与后端约定的token访问key'] ='拼接需要的访问key' + store.getters.Token === ''? '': '拼接需要的访问key' + store.getters.Token === undefined? '': '拼接需要的访问key' + store.getters.Token === null? '': '拼接需要的访问key' + store.getters.Token
    }
    // 看项目实际情况 headers token头
    return config
  },
  error => {
    // Do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)

7.// response interceptor
service.interceptors.response.use(
  response => {
    // response 根据不同status 状态返回 对应不同的comfirm
    const res = response.data
    if (res.code === '后端返回的status或者code获取其他状态码') {
      // console.log('登录状态已过期')
    } else {
      return res
    }
  },
  error => {
    // console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

8. //对外暴露 service 对象
export default service

axios二次封装方式有很多，这只是其中的一种，如果有小伙伴不懂axios可点击axios官网文档