一、安装axios

npm install axios

二、开始封装

在src下新建一个api文件夹，api文件夹下新建一个http.js文件，文件内容如下：

1、引入axios

import axios from 'axios';

2、基础请求方法

function requestFN(method, url, data) {
  // 基础请求方法
  let obj = {
    method, // 请求的类型       
    url, // 请求地址
  }
  if (method === 'get') {
    obj.params = data; // url后面带参数 如 https://echarts.baidu.com/examples/a?test="1"
  } else if (method === 'post') {
    obj.data = data; // data 带参数
  }
  // 返回axios的基础方法
  return axios(obj).then(r => {
    return r; // 方法请求的数据
  })
}

3、基本配置

axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/json';

4、请求拦截器

axios.interceptors.request.use(config => {
  return config;
}, err => {
  Message.error({
    message: '请求超时!'
  });
  return Promise.resolve(err);
})

5、响应拦截器

axios.interceptors.response.use(
  data => {
    if (data && data.status && data.status == 200) {
      if (data.data.code == 50000) {
      // 此处对后端返回错误信息统一处理
        Message.error({
          message: data.data.msg
        });
        return;
      }
      if (data.data.code == 51000) {
        router.replace('/login');
        return;
      }
    }
    return data.data;
  },
  err => {
    Message.error({
      message: '网络错误!'
    });
    return Promise.resolve(err);
  });

6、将封装好的方法暴露出去

export default requestFN;

三、建立接口文档，便于统一处理接口数据

api文件夹下新建一个文件，例如：document.js，用于存放接口数据
1、引入封装好的axios方法

import Http from './http.js';

2、书写接口方法

// 查询菜单
const selectAllArticle = (data) => {
  return Http('get', '/mardown/show/select/all/article', data);
};

3、将接口暴露出去

export default {
 selectAllArticle,
};

四、调用接口

1、引入相关接口文档

import DocumentApi from "@/api/document.js";

2、调用接口

async selectAllArticle() {
      const data = await DocumentApi.selectAllArticle();
      if (data && data.result && data.result.length) {
        // 相关逻辑处理
      }
    },