Loading... **只在Axios 1.6.x上边测试过** 简单实现使用Axios发起GET,POST等请求。 需要再`.env`中配置`VITE_AXIOS_BASE_URL`作为后端服务地址。 ```JavaScript import axios from "axios"; // 获取env中的服务器地址 let server = import.meta.env.VITE_AXIOS_BASE_URL; if (!server) { throw new Error('请在.env文件中配置VITE_AXIOS_BASE_URL'); } else if (server === 'getCurrentDomain') { server = window.location.protocol + '//' + window.location.host } console.log('当前服务器地址:' + server); // 创建axios实例 const instance = axios.create({ // 额外前缀 baseURL: server + '/api', // 超时时间 timeout: 10000, // header请求头 headers: { "X-Requested-With": "XMLHttpRequest", } }); // 请求拦截器 instance.interceptors.request.use(config => { // 取消掉当前正在进行的相同请求 if (config.cancelToken) { config.cancelToken.promise.then(cancel => { cancel('操作取消'); }); } return config; }, error => { return Promise.reject(error); }); // 响应拦截器 instance.interceptors.response.use(response => { return response.data; }, error => { const err = error.response || { status: 0 }; let errorMessage; switch (err.status) { case 400: errorMessage = '错误请求'; break; case 401: errorMessage = '未授权,请重新登录'; break; case 403: errorMessage = '拒绝访问'; break; case 404: errorMessage = '请求错误,未找到该资源'; break; case 405: errorMessage = '请求方法未允许'; break; case 408: errorMessage = '请求超时'; break; case 500: errorMessage = '服务器端出错'; break; case 501: errorMessage = '网络未实现'; break; case 502: errorMessage = '网络错误'; break; case 503: errorMessage = '服务不可用'; break; case 504: errorMessage = '网络超时'; break; case 505: errorMessage = 'http版本不支持该请求'; break; default: errorMessage = `连接错误${err.status}`; } console.error(errorMessage); return Promise.reject(err); }); // 发起GET请求 export function GET(data = {}) { return instance.get(data.url, { params: data.params }); } // 发起POST请求 export function POST(data = {}) { return instance.post(data.url, data.params); } ``` 调用方式 ```JavaScript // 假设request.js在api目录下 import {GET, POST} from "@/api/request.js"; const Test = { getIndexData(data) { return POST({ url: "/index/index", params: data }); }, getCategoryList() { return GET({ url: "/index/category", }); }, } export default Test; ``` POST: ```JavaScript let data = { // anything } let result = await Test.getIndexData(data); ``` Last modification:April 17, 2024 © Allow specification reprint Support Appreciate the author AliPayWeChat Like If you think my article is useful to you, please feel free to appreciate