axios二次封装

axios二次封装有利于减少代码量，更好的管理api

①在src目录下创建api目录。api目录用于存放今后页面不同模块的接口信息。

 具体的接口含义如下：

②将来要实现的效果如下：

import axiosRequest from "./utils/request/http";
axiosRequest({
    path: "product",//使用的api模块
    name: "productInfo",//存储的变量信息
    params: {
        name: "jdie",
        password: "diikde",
    },
})

通过axiosRequest  来调用请求，同时path参数指定模块。name来制定模块中的接口信息，params表示要传入的参数。

③具体的封装在src/utils/request底下，配置了两个文件config.ts和http.ts

config.ts代码如下：

const config = {
    baseURL: import.meta.env.VITE_APP_BASE_API, //该参数在.env.development中进行配置,开发、测试、生成均不相同
    timeout: 15000,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
      // 'token' : 11122
    },
  }
  export default config;
  

http.ts代码如下（主要逻辑在动态import引入数据）：

import axios from "axios";
import axiosConfig from "./config"; // axios请求配置
import qs from "qs";
import { ElMessage } from "element-plus";

// 创建axios实例
const service = axios.create({
    baseURL: axiosConfig.baseURL,
    timeout: axiosConfig.timeout,
    headers: axiosConfig.headers,
});
// 添加请求拦截器
service.interceptors.request.use(
    function (config) {
        //  promise动态添加请求头，加完之后再return出config继续请求
        const headerHandlers = (axiosConfig.headerHandlers || []).map(
            (handler) => {
                return handler(config).then((mixHeaders) =>
                    Object.assign(config.headers || {}, mixHeaders)
                );
            }
        );
        return Promise.all(headerHandlers).then(() => config);
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
service.interceptors.response.use(
    function (response) {
        // 对响应数据做点什么
        return response.data;
    },
    function (error) {
        // 对响应错误做点什么
        ElMessage.error(error.message);
        return Promise.reject(error);
    }
);
// 创建请求
const USE_DATA_METHODS = ["POST", "PUT", "PATCH", "DELETE"];
const createRequest = (requestInfo) => {
    const { path, name, params } = requestInfo; //解构数据
    // console.log(path, name, params);
    const path_prefix = "../../api/";//接口文件夹
    let api;
    import(`${path_prefix}${path}`)//动态载入资源
        .then((res) => {
          //res为import的变量名
            api = res[name];//从资源中取出要发送axios的接口信息
            // console.log(api)
            const method = api.method || "POST";
            const requestParams = USE_DATA_METHODS.includes(method)
                ? { data: qs.stringify(params) }
                : { params: params };
            const config = {
                url: api.path,
                method,
                headers: {
                    ...api.headers,
                },
                ...requestParams,
            };
            //如果请求的不是默认的域名，就修改域名
            if (api.baseURL) {
                config.baseURL = api.baseURL;
            }
            // console.log(config);
            return service(config);
        })
        .catch((err) => {
          ElMessage.error('发送请求失败');
            console.log(err);
        });
};
const axiosRequest = createRequest;
export default axiosRequest;