1：导入axios
import axios from axios;2：实用性允诺头
axios.defaults.headers[Content-Type] = application/json;charset=utf-83：建立axios示例
const service = axios.create({ baseUrl:import.meta.env.VITE_APP_BASE_API, timeout:10000 })4：圣夫龙
service.interceptors.request.use(config=>{ return config }, error => { console.log(error) Promise.reject(error) })5：实用性圣夫龙文本
1import { getToken } from @/utils/auth 2：auth.js export function getToken(){ return } export function setToken(){ return 增设token } export function removeToken() { return 删除token } 3：axios圣夫龙里实用性 service.interceptors.request.use(config=>{// 1 是否需要增设 token config.headers || {} 判断是否已经增设过token constisToken = (config.headers || {}).isToken ===false if (getToken() && !isToken) { config.headers[Authorization] = Bearer + getToken() // 让每个允诺携带自定义token 请根据实际情况自行修改 } })2：是否需要防止数据重复提交
constisRepeatSubmit = (config.headers || {}).repeatSubmit ===false if (!isRepeatSubmit && (config.method === post || config.method === put)) { const requestObj = { url: config.url, data: typeof config.data === object ? JSON.stringify(config.data) : config.data, time: new Date().getTime() } const sessionObj = cache.session.getJSON(sessionObj) if (sessionObj === undefined|| sessionObj ===null || sessionObj === ) { cache.session.setJSON(sessionObj, requestObj) } else { const s_url = sessionObj.url; // 允诺地址 const s_data = sessionObj.data; // 允诺数据 consts_time = sessionObj.time;// 允诺时间 const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交 if(s_data === requestObj.data && requestObj.time – s_time < interval && s_url === requestObj.url) {const message = 数据正在处理，请勿重复提交; console.warn(`[${s_url}]: ` + message) return Promise.reject(new Error(message)) } else { cache.session.setJSON(sessionObj, requestObj) } } }3：get允诺映射params参数
if (config.method === get && config.params) { leturl = config.url +? + tansParams(config.params); url = url.slice(0, -1); config.params= {}; config.url = url; }/** * 参数处理 * @param {*} params 参数 */ export function tansParams(params) { let result = for (const propName of Object.keys(params)) { const value = params[propName]; varpart = encodeURIComponent(propName) +“=”; if (value !== null && value !== “” && typeof (value) !== “undefined”) { if (typeof value === object) { for (const key of Object.keys(value)) { if (value[key] !== null && value[key] !== “” && typeof (value[key]) !== undefined) { let params = propName + [ + key + ]; varsubPart = encodeURIComponent(params) + “=”; result += subPart + encodeURIComponent(value[key]) + “&”; } } } else{ result += part + encodeURIComponent(value) + “&”; } } } return result }6：实用性响应圣夫龙
1：新建错误代码文件errorCode.js
export default { 401: 认证失败，无法访问系统资源, 403: 当前操作没有权限, 404: 访问资源不存在, default: 系统未知错误，请反馈给管理员 }2:设置相应圣夫龙、根据返回的code、提示对应的信息
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from element-plus import errorCode from “@/utils/errorCode”; export let isRelogin = { show: false}; 是否显示重新登录 service.interceptors.response.use(res => { const code = res.data.code || 200; 信息 适配自定义的提示信息、后端返回的、为空默认展示的 const msg = errorCode[code] || res.data.msg || errorCode[default] //3：如果返回的数据是二进制数据、则不处理直接返回 if (res.request.responseType === blob || res.request.responseType === arraybuffer) { return res.data } //4：特殊状态码、特殊处理 if (code === 401) { if (!isRelogin.show) { isRelogin.show = true; ElMessageBox.confirm(登录状态已过期，您可以继续留在该页面，或者重新登录, 系统提示, { confirmButtonText: 重新登录, cancelButtonText: 取消, type: warning }).then(() => { isRelogin.show = false; // useUserStore().logOut().then(() => { // location.href = /index; // }) }).catch(() => { isRelogin.show = false; }); } return Promise.reject(无效的会话，或者会话已过期，请重新登录。) } else if (code === 500) { ElMessage({ message: msg, type: error }) return Promise.reject(new Error(msg)) } else if (code === 601) { ElMessage({ message: msg, type: warning }) return Promise.reject(new Error(msg)) } else if (code !== 200) { ElNotification.error({ title: msg }) return Promise.reject(error) } else { return Promise.resolve(res.data) } }, error => { let{ message } = error;if (message == “Network Error”) { message = “后端接口连接异常”; } else if (message.includes(“timeout”)) { message = “系统接口允诺超时”; } else if (message.includes(“Request failed with status code”)) { message =“系统接口” + message.substr(message.length – 3) + “异常”; } ElMessage({ message: message,type: error, duration: 5 * 1000 }) return Promise.reject(error) } )
