二次封装提升方便性和维护性，能在二次封装中添加加载和进度条等效果

1 创建文件

在src创/common/api/request.js

2 二次封装request.js

import { Indicator } from "mint-ui";
import axios from "axios";
import store from "@/store";
import router from "@/router";
export default {
  common: {
    method: "GET",
    data: {},
    params: {},
    headers: {},
  },
  $axios(options = {}) {
    options.method = options.method || this.common.method;
    options.data = options.data || this.common.data;
    options.params = options.params || this.common.params;
    options.headers = options.headers || this.common.headers;

    //请求前加载中
    Indicator.open();
    //是否是登录状态
    if (options.headers.token) {
      options.headers.token = store.state.user.token;
      if (!options.headers.token) {
        router.push("/login");
      }
    }
    return axios(options).then((v) => {
      let data = v.data.data;
      
      //如果token过期 重新登录
      if (data.code === 1000) {
        Indicator.close();
        return router.push("/login");
      }
      return new Promise((res, rej) => {
        if (!v) return rej();
        setTimeout(() => {
          Indicator.close();
        }, 500);
        res(data);
      });
    });
  },
};

3 引入引用

在需要使用接口的组件中引用

import http from "@/common/api/request.js"

 async getData() {
      let res = await http.$axios({
        url: "/api/index_list/0/data/1",
      });
      console.log(res);
      this.items = Object.freeze(res.topBar);
      // this.items = res.data.data.topBar;
      this.newData = Object.freeze(res.data);
      this.$nextTick(() => {
        this.obetterScroll = new BetterScroll(".wrapper", {
          movable: true,
          zoom: true,
        });
        1;
      });
    },