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

一、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 })
相关推荐
应用市场2 小时前
构建自定义命令行工具 - 打造专属指令体
开发语言·windows·python
岁月宁静2 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
Dfreedom.2 小时前
一文掌握Python四大核心数据结构:变量、结构体、类与枚举
开发语言·数据结构·python·变量·数据类型
一半烟火以谋生2 小时前
Python + Pytest + Allure 自动化测试报告教程
开发语言·python·pytest
虚行2 小时前
C#上位机工程师技能清单文档
开发语言·c#
小羊在睡觉3 小时前
golang定时器
开发语言·后端·golang
心易行者3 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
CoderCodingNo3 小时前
【GESP】C++四级真题 luogu-B4068 [GESP202412 四级] Recamán
开发语言·c++·算法
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html