基于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 })
相关推荐
Chef_Chen1 分钟前
从0开始学习R语言--Day39--Spearman 秩相关
开发语言·学习·r语言
棉花糖超人4 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
不学会Ⅳ8 分钟前
Mac M芯片搭建jdk源码环境(jdk24)
java·开发语言·macos
好开心啊没烦恼1 小时前
Python 数据分析:计算,分组统计1,df.groupby()。听故事学知识点怎么这么容易?
开发语言·python·数据挖掘·数据分析·pandas
lljss20202 小时前
Python11中创建虚拟环境、安装 TensorFlow
开发语言·python·tensorflow
Python×CATIA工业智造5 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜6 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄6 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122467 小时前
JAVA内存区域划分
java·开发语言·redis
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端