今天童鞋問問axios怎么封裝，我把自己封裝的給貼上來缩歪。其中也有參考百度的归薛。
我習慣在src目錄下創(chuàng)建一個libs文件，然后在libs文件下創(chuàng)建axios.js.

// axios.js
import axios from "axios";
import { message } from "ant-design-vue"; // 這里是引用了一個公共的彈框

class HttpRequest {
  constructor(baseUrl = baseURL) {
    this.baseUrl = baseUrl;
    this.queue = {};
  }
  getInsideConfig() {
    return {
      baseURL: this.baseUrl
    };
  }
  destroy(url) {
    delete this.queue[url];
    if (!Object.keys(this.queue).length) {
      // Spin.hide()
    }
  }
  interceptors(instance, url) {
    // 請求攔截
    instance.interceptors.request.use(
      config => {
        // 添加全局的loading...
        if (!Object.keys(this.queue).length) {
          // Spin.show() // 不建議開啟匪蝙，因為界面不友好
        }
        this.queue[url] = true;
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    // 響應攔截
    instance.interceptors.response.use(
      res => {
        this.destroy(url);
        const { data, status } = res;
        return { data, status };
      },
      error => {
        this.destroy(url);
        let errorInfo = error.response;
        if (!errorInfo) {
          const {
            request: { statusText, status },
            config
          } = JSON.parse(JSON.stringify(error));
          errorInfo = {
            statusText,
            status,
            request: { responseURL: config.url }
          };
        }
        this.addErrorLog(errorInfo);
        return Promise.reject(error);
      }
    );
  }
  addErrorLog(err) {
    // console.log(err);
    const { status } = err;
    switch (status) {
      case 510:
        // console.log(message);
        message.error("登錄失效主籍，請重新登錄");
        break;
      case 500:
        message.error(err.data);
        break;
      case 404:
        err.data.message === "No message available"
          ? message.error("請求錯誤")
          : message.error(err.data.message);
        break;
      default:
        message.error(err.data);
    }
  }
  request(options) {
    const instance = axios.create();
    options = Object.assign(this.getInsideConfig(options), options);
    this.interceptors(instance, options.url);
    return instance(options);
  }
}
export default HttpRequest;

然后在axios.js 同級 創(chuàng)建api.request.js

// api.request.js
import HttpRequest from "./axios";
// 這里寫的是請求路徑的ip或者域名
const baseUrl =
  process.env.NODE_ENV === "development"
    ? "" : window.location.origin + window.location.pathname;
const axios = new HttpRequest(baseUrl);
export default axios;

以上就是 axios 的封裝了。接下來看一下是怎么使用的
libs 文件同級創(chuàng)建api文件夾逛球，api下放置各個模塊的接口js文件千元，直接看文件內如何使用

import axios from "@/libs/api.request";

export const centerMesList = () => {
   return axios.request({
         url: "api/v1/board/getMesList",
         methods: "get"
   });
};

然后在調用接口的頁面直接引用

import { centerMesList, centerOeeList } from "@/api/board";

// 寫到方法中
centerMesList().then(res => {
        const { status, data } = res;
        if (status === 200) {
          const { code, error, result } = data;
          if (code === 200) {
          } else {
            this.$message.error(error);
          }
        } else {
          this.$message.error("請求異常");
        }
      });