axios 封装

1、在根目录中创建 utils 文件，并且在 utils 中创建 axios.js 文件

import axios from "axios";
import router from "../router";
import { ElMessage } from 'element-plus'

const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,//此处可直接填写接口域名，我是采用从环境变量中读取，方便打包区分
  timeout: 50000,//超时响应时间
  headers: {//请求头
    "Content-Type": "application/json",
    "token": localStorage.getItem("token") || "",
  },
})

//请求拦截 请求之前做的事情
service.interceptors.request.use(
  function (config: any) {
    if (config.headers) {
      config.headers["token"] = localStorage.getItem("token") || "";
    }
    return config;
  },
  function (error: any) {
    console.log(error);
    return Promise.reject(error);
  }
)

//响应拦截  请求之后的处理，一般用来处理请求的状态码问题，例；500、200、404、502
service.interceptors.response.use(
  function (res: any) {
    return new Promise((resolve, reject) => {
      switch (res.data.code) {
        case 200:
          return resolve(res.data);
        case 500:
          ElMessage.error(res.data.msg)
          reject(res.data);
          break;
        case 355:
          localStorage.clear();
          router.push("/login");
          break;
      }
    });
  },
  function (error: any) {
    return Promise.reject(error);
  }
);

export default service;

2、在根目录创建 config 文件夹，并且在 config 文件夹中创建 api.js

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

//get请求
export const getMenuList = () => {
    return request({
        url: '/menu/list',
        method: 'get'
    })
}

//post请求
export const postMenuEdit = () => {
    return request({
        url: '/menu/edit',
        method: 'post',
        data
    })
}

3、在需要请求接口的地方

import { getMenuList } form '@/config/api'
//请求的异步问题自行解决
getMenuList('你的请求参数').then(res=>{
  //res就是接口返回内容
})