在这里，我使用的 react 作为代码示例，在 vue 中可能有点不同，但是万变不离其宗，大同小异罢了。

首先，在项目中 src 下创建一个 utils 文件夹，在文件夹中创建 request.js 文件，代码如下：

import axios from "axios";
import { message } from "antd"; //这里是用的antd UI库，也可以是其他ui库，看个人习惯
const request = axios.create({
  // 后台接口的基准地址
  baseURL: "http://www.xxx.xxx/", //请求地址
  timeout: 10000, // 响应超出这个时间将视为失败
  withCredentials: false, // 跨域请求时发送Cookie
});

// 添加请求拦截器
request.interceptors.request.use(
  (config) => {
    return config;
  },
  function (error) {
    //对相应错误做点什么
    return Promise.reject(error);
  }
);

//拦截器响应
request.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    //对相应错误做点什么
    if (error) {
      message.error("出错了");
      return Promise.reject(error);
    }
  }
);

export default request;

第二步，创建 axios 文件下，或者也可以叫 api 文件夹，用来保存各种请求：

import request from "../utils/request";


// get请求
export function getAPI(params) {
  return request({
    url: "/get",
    method: "get",
    params,
  });
}

// post请求
export function postAPI(data) {
  return request({
    url: "/post",
    method: "post",
    data,
  });
}

// delete请求个put请求就不一一书写了，同上使用
// 当然，这只是一个示例，具体还要看业务的具体要求，我也遇到过在post请求的url后面拼接参数的，如此种种