扬州论坛_外贸平台有哪些用户量大的_网站结构_全网营销

一、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 = keyconst { method, url } = valueif(value.hasOwnProperty('baseURL')){const baseURL = value.baseURLres[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 })