1. 第一次封装: 把项目中所有请求做的相同的事情(baseURL, timeout, 请求/响应式, 成功或失败的提示)封装到一个文件夹里, 这个文件夹通常叫做utils。

// axios封装-通用工具函数
// 引入axios
import axios from 'axios'
// 服务器地址 写上以后 所有的请求 会自动在前面拼接这个地址
axios.defaults.baseURL = 'http://127.0.0.1:5000';
axios.defaults.timeout = 3000;  // 超时
 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

2. 第二次封装: 把项目中所有的请求按模块划分,封装在一个文件夹里, 一般是叫api, 便于请求地址的统一管理和维护,以及可以在指定模块做一些个性化的处理

// 引入通用工具函数
import request from "@/utils/request"
 
【方式1】
// post封装
export const 变量名 = data=>{
    return request({
        url:'路径',
        method:'post',
        data
    })
}
 
// get封装
export const 变量名 = params =>{
    return request({
        url:'路径',
        method:'get',
        params
    })
}
 
【方式2】
export function 变量名(params) {
  return request.get("路径", params);
}

3. 第三次封装: 直接在业务组件(vue组件里)调用第二层封装好的方法,请求接口获取数据，调用的时候可使用async和await把异步代码同步化

补充ing

参考链接：axios的三次封装_axios三层封装_雨滴2000的博客-CSDN博客