结合vuex封装axios方法

axios封装apis.js

import axios from 'axios'
import { Message } 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: 5000 // 请求超时时间
})

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

// respone拦截器
service.interceptors.response.use(
  response => response,
  // 根据res.code编码判断
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       //判断
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    //错误
    Message({
      message: error.message,
      type: 'error',
      duration: 3000
    })
    return Promise.reject(error)
  })

export default service

模版调用

import request from '@/utils/apis'

//使用
export function getInfo(params) {
  return request({
    url: '/user/list',
    method: 'get',
    params
  });
}