这样封装 axios 是否更方便呢axios疯装，这样子是否方便呢？。。这种方式使得 `api.js` 文件中的导出对

Axios 封装：简化 HTTP 请求处理

在现代前端开发中，Axios 是一个非常流行的基于 Promise 的 HTTP 客户端，它支持浏览器和 Node.js 环境。Axios 提供了丰富的配置选项和拦截器功能，使得处理 HTTP 请求变得简单而强大。然而，随着项目规模的增长，直接使用 Axios 可能会让代码变得复杂和难以维护。因此，封装 Axios 成为一个常见的实践，本文将介绍如何封装 Axios 以简化 HTTP 请求处理。

为什么需要封装 Axios？

统一请求配置：项目中可能会有多个 API 请求，封装可以统一处理请求的基础配置、
处理请求和响应拦截器：通过封装可以集中处理请求前的预处理和响应后的错误处理。
简化组件中的请求调用：封装后的请求函数可以更简洁地在组件中调用，提高代码的可读性和可维护性。
支持动态 URL：封装可以方便地处理动态 URL，使得 API 调用更加灵活。

封装 Axios 的步骤

1. 创建 `config.js`

首先，定义一个 config.js 文件，存储 API 的 URL 和 HTTP 方法。

// src/api/config.js

const prefix= ''; //prefix按需使用
const apiConfigs = {
  getRolePage: {
    url: `${prefix}/sys-role/page`,
    method: 'get',
  },
  addRole: {
    url: `${prefix}/sys-role`,
    method: 'post',
  },
  updateRole: {
    url: `${prefix}/sys-role/{id}`, // {id}请求时会替换掉
    method: 'put',
  },
  delRole: {
    url: `${prefix}/sys-role/{id}`,
    method: 'delete',
  },
};

export default apiConfigs;

2. 创建 Axios 封装

在 api.js 文件中，使用 config.js 中的配置动态生成导出对象。

// src/api/api.js
import axios from 'axios';
import apiConfigs from './config.js';

const axiosRequest = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
  timeout: 10000,
});

// 请求拦截器
axiosRequest.interceptors.request.use((config) => {
  // 在发送请求之前消息头加入token 
  // config.headers['Authorization'] = localStorage.getItem('token');
  return config;
}, (error) => {
  // 请求错误
  return Promise.reject(error);
});

// 响应拦截器
axiosRequest.interceptors.response.use((response) => {
  // 对响应数据做处理
  // 。。。
  return response.data;
}, (error) => {
  // 对响应错误做处理
  return Promise.reject(error);
});


// 包裹请求方法的容器
const api = {};

for (let key in apiConfigs) {
    api[key] = function (params, isFormData = false, config = {}) {
        let { url, method } = apiConfigs[key]; // url method
        method = method.toLowerCase();
        
        if (params) {
            params = { ...params };
            //  替换掉url中的 {id} 类似参数
            for (let key in params) {
                if (url.includes(`{${key}}`)) {
                    url = url.replace(`{${key}}`, params[key]);
                    delete params[key];
                }
            }
            // content-type是否是form-data的判断
            if (isFormData) {
                let formData = new FormData();
                for (let i in params) {
                    formData.append(i, params[i]);
                }
                params = formData;
            }
        }
        // 不同请求的判断
        if (method === 'put' || method === 'post' || method === 'patch') {
            return axiosRequest[method](url, params, config);
        } else if (method === 'delete' || method === 'get') {
            config.params = params;
            return axiosRequest[method](url, config);
        }
    };
}

export default api;

3. 使用封装的请求

在你的 Vue 3 组件中使用封装的请求函数。

<template>
  <div>
    <button @click="fetchRoles">获取角色列表</button>
    <ul>
      <li v-for="role in roleList" :key="role.id">{{ role.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref , onMounted } from 'vue';
import api from '@/api/api.js';
const roleList = ref([]);

const fetchRoles = async () => {
      try {
        const result = await api.getRolePage({paseNum:1,pageSize:100});
        roleList.value = result.data.list
      } catch (error) {
        console.error('Error fetching:', error);
      }
    };

onMounted(() => {
    fetchRoles()
})
</script>

封装的好处

这种方式使得 api.js 文件中的导出对象完全根据 config.js 中的配置动态生成，增加了灵活性和可维护性。这样，有新的接口时只需要在 config.js 中添加或修改 API 配置即可

这样封装 axios 是否更方便呢