基于vue3+vite+axios的接口请求封装

编码七号2025-03-05 16:31

一、src目录下新建http文件夹，文件夹下新建index.js/request.js文件以及api文件夹

二、reques.js文件封装请求方法

复制代码

import axios from 'axios';
import qs from 'qs'

// 创建axios实例
const request = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
  timeout: 1000000
});

request.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json'
    const token = sessionStorage.getItem('token') || ''
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

let post = (url, param) => {
    return request({
        method: 'POST',
        url: `${url}?${qs.stringify(param)}`,
    })
}


let get = (url, params) => {
    return request({
        method: 'GET',
        url: `${url}${params}`,
    })
}

export { post, get }

三、index.js文件遍历api文件夹下的文件，引入请求方法，封装对象

复制代码

import { post, get, postBody } from './request';
let baseMethod = {
    post,
    get
}

const transRequest = (apiObj) => {
    let res = {};
    for (const [key, value] of Object.entries(apiObj)) {
        console.log(key, value)
        const name = key
        const { method, url } = value
        if(value.hasOwnProperty('baseURL')){
            const baseURL = value.baseURL
            res[name] = (data, option) => baseMethod[method](url, data, baseURL, option)
        }else{
            res[name] = (data, option) => baseMethod[method](url, data, option)
        }
        
    }
    return res
}

// 遍历接口文件夹
function importApi() {
    const res = {};
    const modules = import.meta.glob('./api/*.js');
    for (const path in modules) {
        modules[path]().then((file) => {
            const api = transRequest(file)
            Object.assign(res, api)
        })
    }
    return res;
}

const ApiList = importApi();



export { ApiList } ;

四、api文件夹下根据模块化划分新建js文件

复制代码

let loginApi = {
    method: 'post',
    url: '/login',
    des: '登录接口'
}


export {
    loginApi,
  
}

五、使用方式

复制代码

import { ApiList } from '../http/index'

 let res = await ApiList.searchByTextApi({ keyword: text })