vue中的axios配置及接口请求路径api配置_vue.js_

npm install axios --save

// 导出所有插件 let moduleFiles = require.context('./modules', true, /\.js$/); export default moduleFiles; 

'use strict'; import axios from 'axios'; // import store from "@/store"; // import { message } from "ant-design-vue" import { getAllPromise } from '@/utils/tools'; import { triggerEvent } from '@/utils/events'; // 完整配置参考: https://github.com/axios/axios#request-config axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'; axios.defaults.headers.put['Content-Type'] = 'application/json;charset=utf-8'; axios.defaults.headers.delete['Content-Type'] = 'application/json;charset=utf-8'; let config = { baseURL: process.env.VUE_APP_BASE_API || process.env.apiUrl || '', timeout: 60 * 1000, withCredentials: false, crossDomain: true, transformRequest: [ (data) => { if (!data || typeof data === 'string') { return data; } if (data instanceof FormData) { return data; } // 对Blob对象进行处理 let hasBlob = Object.values(data).some((it) => { return it instanceof Blob; }); if (!hasBlob) { return JSON.stringify(data); } const formData = new FormData(); Object.entries(data).forEach(([key, value]) => { formData.append(key, value); }); return formData; }, ], }; const _axios = axios.create(config); // 注册all方法，执行多个并发请求 // 可传入Promise、包含Promise的数组、返回值为Promise的方法 _axios.all = (...requsets) => { // 获取所有Promise对象 let promiseList = getAllPromise(requsets); return new Promise((resolve, reject) => { axios .all(promiseList) .then( axios.spread((...response) => { // 两个请求现在都执行完成 resolve(response); }) ) .catch((error) => { reject(error); }); }); }; _axios.interceptors.request.use( (config) => { // const token = getCookie(AUTH_TOKEN_FRONT); // config.headers.common[AUTH_TOKEN_END] = token; const token = 'AUTH_TOKEN_FRONT'; config.headers.common.Token = token; return config; }, (error) => { return Promise.reject(error); } ); // 拦截响应 _axios.interceptors.response.use( (response) => { // console.log(response) // 用来判断是否请求成功 const success = response.status === 200; let messages = ''; if (!success) { if (typeof response.data === 'string') { messages = '服务器错误，未获取到响应数据'; } else { if (response.status === 200) { return Promise.reject(response); } // 请求成功，但在业务上为失败 messages = response.message || response.statusText || '操作执行失败'; } console.error(messages); return Promise.reject(response); } return { data: response.data, success, messages, }; }, (error) => { if (!navigator.onLine) { triggerEvent(window, 'offline'); return Promise.reject(error); } if (!error.response) { console.error('连接服务器失败'); return Promise.reject(error); } let status = error.response.status; if (status === 401) { // message.error("您的登录已过期，请重新登录"); // window.location.reload(); // store.dispatch("user/logout"); return Promise.reject(error); } if (status < 200) { console.warning(`未处理的消息响应，状态码：${status}`); } else if (status >= 300 && status < 400) { console.warning(`未处理的重定向响应，状态码：${status}`); } else if (status >= 400 && status < 500) { console.error(`客户端错误，状态码：${status}`); } else if (status >= 500) { console.error(`服务器错误，状态码：${status}`); } // 系统请求失败 return Promise.reject(error); } ); // -------------------------vue2.x导出------------------------- // export default { // install: (Vue) => { // Vue.$_http = _axios; // window.$_http = _axios; // Object.defineProperties(Vue.prototype, { // $_http: { // get() { // return _axios; // }, // }, // }); // }, // }; // -------------------------vue3.x导出------------------------- export default { install: (app) => { app.$_http = _axios; window.$_http = _axios; Object.defineProperties(app.config.globalProperties, { $_http: { get() { return _axios; }, }, }); }, }; 

/** * 从参数中获取所有Promise对象，组成数组并返回 * @param {...any} datas 待解析数据 */ export function getAllPromise(...datas) { let promiseList = []; datas.forEach((it) => { if (isDataType(it, 'Promise')) { promiseList.push(it); return; } // 是方法则获取执行的结果 if (isDataType(it, 'Function')) { promiseList.push(...getAllPromise(it())); return; } if (isDataType(it, 'Array')) { promiseList.push(...getAllPromise(...it)); } }); return promiseList; } /** * 判断数据的类型是否符合预期 * 只传一个参数data，则返回数据的类型； * 传入多个参数，则判断数据是否属于该类型（或属于类型数组中的一个） * @param {*} data 需要判断类型的数据 * @param {...any} typeList 字符串或字符串数组，可不传 */ export function isDataType(data, ...typeList) { let dataType = Object.prototype.toString .call(data) .replace(/^\[object/, '') .replace(/\]$/, '') .replace(/\s/, ''); typeList = flat(typeList); let hasType = typeList.some((it) => { return it && isDataType(it) === 'String'; }); if (!hasType) { return dataType; } if ( typeList.includes(dataType) || typeList.includes(dataType.toLowerCase()) ) { return true; } return false; } /** * Array.flat在app和Trident内核上会报错，重写 * @param {Array} list 目标数组 */ export function flat(list) { if (Array.prototype.flat) { return list.flat(Infinity); } let retArr = []; if (!Array.isArray(list)) { throw new Error( `Invalid parameter: type check failed for parameter 'list'. Expected Array, But got ${typeof list} with value ${list}` ); } list.forEach((it) => { if (!Array.isArray(it)) { retArr.push(it); return; } retArr.push(...flat(it)); }); return retArr; } 

// 浏览器中的事件管理 /** * 触发一个DOM事件 * @param {Element} node 事件发生的节点元素 * @param {String} name 事件名称，不含前缀：on * @param {...any} options 可选的事件配置项 */ export function triggerEvent(node, name, ...options) { if (node.fireEvent) { return node.fireEvent('on' + name); } let eventName; let evt; if (/^mouse|click/.test(name)) { eventName = 'MouseEvents'; evt = document.createEvent(eventName); evt.initMouseEvent(name, ...options); } else if (['DOMActivate', 'DOMFocusIn', 'DOMFocusOut'].includes(name)) { eventName = 'UIEvents'; evt = document.createEvent(eventName); evt.initUIEvent(name, ...options); } else if (/^key/.test(name)) { eventName = 'KeyboardEvent'; evt = document.createEvent(eventName); evt.initKeyboardEvent(name, ...options); } else if (name.startsWith('DOM')) { eventName = 'MutationEvents'; evt = document.createEvent(eventName); evt.initMutationEvent(name, ...options); } else { eventName = 'HTMLEvents'; evt = document.createEvent(eventName); evt.initEvent(name, ...options); } return node.dispatchEvent(evt); } 

'use strict'; /* eslint-disable no-unused-vars */ /** 有几个模块，subList就有几个元素 * @param: name 子系统名称 * @param: url 子系统使用的环境变量（请求地址，便于不同模块请求不同服务器的配置，可在三个环境中新增类似VUE_APP_BASE_API的域名地址变量） */ const subList = [ { name: 'API_LIST_USER', url: 'VUE_APP_BASE_API', }, { name: 'API_LIST_MANAGEMENT', url: 'VUE_APP_BASE_API', }, ]; // 所有api子系统 let API_LIST = {}; const moduleFiles = require.context('./modules', true, /\.js$/); moduleFiles.keys().forEach((modulePath) => { API_LIST = { ...API_LIST, ...moduleFiles(modulePath).default }; }); // 合成API地址集合 let apiList = {}; subList.forEach((it) => { let subApi = Object.entries(API_LIST[it.name]).reduce( (target, [key, value]) => { target[key] = process.env[it.url].replace(/\W*$/, '') + '/' + value.replace(/^\W*/, ''); return target; }, {} ); apiList = { ...apiList, ...subApi }; }); export default apiList; 

/* 用户相关api */ export default { API_LIST_USER: { // 登录 INTERFACE_GET_USER_LOGIN: 'user/login', // 查询管理员列表 INTERFACE_GET_USER_LIST: 'admin/users', // 新增管理员 INTERFACE_POST_USER_ADMIN: 'admin/register', // 删除管理员 INTERFACE_DELETE_USER_ADMIN: 'admin/users', }, }; 

/* 管理相关api * @param: key => 子系统名称，用于api/index.js中 */ export default { API_LIST_MANAGEMENT: { // 工种列表 INTERFACE_GET_ENGINEERINGWORK_LIST: '/engineertypes', // 新建工种 INTERFACE_POST_ENGINEERINGWORK_CREATE: '/admin/engineertype', // 删除工种 INTERFACE_DELETE_ENGINEERINGWORK_DELETE: '/admin/engineertype/{engineertypeid}', }, }; 

import Vue from 'vue'; import App from './App.vue'; // 注册自定义插件 import moduleFiles from './plugins'; // 引入api地址 import apiList from '@/api'; // 批量使用自定义插件 moduleFiles.keys().forEach(modulePath => { Vue.use(moduleFiles(modulePath).default); }); // 注册所有api地址为全局变量 Vue.prototype.$_API = apiList; new Vue({ render: (h) => h(App), }).$mount('#app'); 

import { createApp } from 'vue'; import App from './App.vue'; // 引入自定义插件 import moduleFiles from './plugins'; // 引入api地址 import apiList from '@/api'; const app = createApp(App); app.mount('#app'); // 注册所有api地址为全局变量 app.config.globalProperties.$_API = apiList; // 批量使用自定义插件 moduleFiles.keys().forEach((module
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：在Vue使用$attrs实现构建高级组件_vue.js_
                                                                
下一篇：使用Vue3实现羊了个羊的算法_vue.js_