一、Axios的简介

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。
Axios 使用简单，包尺寸小且提供了易于扩展的接口。

二、封装Axios的好处

在前端的开发中，项目中我们往往需要将网络请求进行一定程度的封装，以满足我们的业务需求，更有利于我们的开发和维护，节省开发时间和提高效率。
在Vue项目中直接使用Axios存在以下问题：

多个组件重复编写相同的请求配置
缺乏统一的错误处理机制
难以维护和更新全局配置
无法快速切换不同环境接口地址
通过封装Axios可以实现：
✅ 统一管理接口地址
✅ 集中处理错误信息
✅ 添加全局Loading效果
✅ 简化组件中的使用方式
✅ 增强代码可维护性

三、完整封装实现步骤

本文以Vue3项目为例，进行实例讲解。

2.1 新建request.js文件，代码如下：

import axios from 'axios';

const instance = axios.create({
 baseURL: 'http://3.5.7.8:7001/context',
 timeout: 5000,
 headers: {
   'Content-Type': 'application/json',
 },
});

instance.interceptors.request.use(
 config => {
   const token = localStorage.getItem('token');
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
   return config;
 },
 error => {
   return Promise.reject(error);
 }
);

instance.interceptors.response.use(
 response => {
   return response.data;
 },
 error => {
   if (error.response) {
     switch (error.response.status) {
       case 401:
         // 处理未授权
         break;
       case 404:
         // 处理未找到
         break;
       default:
         // 处理其他错误
     }
   }
   return Promise.reject(error);
 }
);

const http = {
 get: (url, params) => instance.get(url, { params }),
 post: (url, data) => instance.post(url, data),
 put: (url, data) => instance.put(url, data),
 delete: (url) => instance.delete(url),
 postFile: (url, data) => instance.post(url, data, {
   headers: {
       'Content-Type': 'multipart/form-data',
       // Authorization: `Bearer ${localStorage.getItem('token')}`
   }
 }),
};

export default http;

记得把baseURL修改为你自己的实际地址。

2.2 新建user.ts文件，代码如下：

/*
* @Author: wlx
* @Date: 2024-04-24 14:07:06
* @LastEditors: wlx
* @LastEditTime: 2024-06-14 16:17:41
* @Description: 用户相关的接口
*/
import http from '@/api/request';

// 详情
export const fetchUserInfo = (data: any) => http.post('/user/queryUser', data);

// 获取用户列表
export const listUser = (data: any) => http.post('/user/queryUserList', data);
// 新增用户
export const addUser = (data: any) => http.post('/user/addUser', data);

// 编辑用户
export const editUser = (data: any) => http.post('/user/editUser', data);
// 删除用户
export const deleteUser = (data: any) => http.post('/user/deleteUser', data);

// 更新用户头像
export const updateUserAvator = (data: any) => http.post('/user/updateUserAvatar', data);

2.3 在文件中引入：

import { fetchUserInfo, listUser, logout } from '@/api/user';

const userInfo = ref({});
onMounted(() => {
 getUserInfo(1);
});
const getUserInfo = (userId) => {
 try {
   let params = {
     id: userId,
   }
   console.log('params:', params)

   fetchUserInfo(params).then((res) => {
     let result = res.data; // 假设返回的数据在data属性中
     console.log('result:', result)
     if (result) {
         userInfo.value = result;
     }
   }).catch(() => {
     logout();
   });    
 } catch (error) {
   console.error('There was an error!', error);
 }
}

以上代码亲测有效，希望可以帮助到你。