axios封装 - 发送请求，取消请求，拦截器，token过期处理

.env.development

VUE_APP_URL="https://mock.yonyoucloud.com/mock/7509/laoke"

代码效果演示

• 简化封装

import axios from 'axios';

// 组件自己换
import { Loading } from 'element-ui';

// 请求取消
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 保证只有一个loading实例(不然会有个坑，渲染多个loading)
let loading;
// 实例化
const instance = axios.create({
  baseURL: process.env.VUE_APP_URL, // 公共地址
  timeout: 3000, // 超时
  cancelToken: source.token, // 取消请求（比如你进入某个路由后，可能就停在了这个页面就1s时间， 就立马进入了下个路由，这时，前边这个路由的请求就可以取消掉了）
});
// 直接调用source.cancel('请求被取消')，接口会取消请求，可以在路由离开当前页面后，调用一下;

// 请求拦截
instance.interceptors.request.use((config) => {
  // 请求头携带token
  config.headers['AuthToken'] = 'your.token';
  // 保证每次都是最新的实例，这样，不管你页面一次调多少个接口，都只有一个loading（单例）
  loading = Loading.service({
    lock: true,
    text: '加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  return config;
});
// 响应拦截
instance.interceptors.response.use((response) => {
  const { status, data } = response;
  if (Object.is(status, 200)) {
 	loading.close();
    const { code, msg } = data;
    switch (code) {
      case 200:
        msg && console.log(msg);
        return Promise.resolve(data.data);
      case 304:
        // 请求过期
        console.log('跳转到首页');
        break;
      case 500:
        return Promise.reject('西败了');
      default:
        return;
    }
  } else {
    return Promise.reject(new Error());
  }
});
export default instance;

可以在抽象一层 service文件夹

import request from '@/utils/request';
export function getBanner(params) {
  return request({
    url: '/banner',
    method: 'get',
    params,
  });
}
export function getUser(params) {
  return request({
    url: '/user',
    method: 'get',
    params,
  });
}
export function getError(data) {
  return request({
    url: '/error',
    method: 'get',
    data,
  });
}

组件中调用（这里虽然调用了多次接口， 但还是只有loading）

import { getUser } from '@/service';
export default {
  mounted() {
    getUser().then((res) => {
      console.log(res);
    });
    getUser().then((res) => {
      console.log(res);
    });
    getUser().then((res) => {
      console.log(res);
    });
    getUser().then((res) => {
      console.log(res);
    });
    getUser().then((res) => {
      console.log(res);
    });
    getUser().then((res) => {
      console.log(res);
    });
  },
};