vue 对axios进行封装

token配置、中英文配置、对所有接口统一设置防抖、对所有post接口统一设置节流 

废话少说直接上代码

request.js 

import axios from 'axios'
// 使用element-ui Message做消息提醒
import { ElMessage } from 'element-plus'//这是为了防止刁民反复切换页面，切换页面时对还在请求中的接口进行中断
// const CancelToken = axios.CancelToken;
// import pinia from '../store'
// import { useNet } from '../store/net'
// const net = useNet(pinia)
import routes from '../router/index.js'//中英文，不使用注释掉，$t('xxx.xxx.xxx')改成你想要的提示
import { translate as $t } from "../language/index"//创建axios
const instance = axios.create({baseURL: process.env.BASE_API,timeout: 10000
})
//节流
let lastTime = new Date().getTime()
//防抖
const debounceTokenCancel = new Map()//请求前拦截
instance.interceptors.request.use(config => {const token = localStorage.getItem('token');config.headers = {//配置token'Content-Type': 'application/json','T-Authorization': token,//中英文标识，判断当前中英文'Accept-Language': localStorage.getItem("language") == null ? 'zh-CN' : localStorage.getItem("language") == 'zh' ? 'zh-CN' : 'en-US'}//切换页面强行中断请求// config.cancelToken = new CancelToken(c => {//     net.cancel = c// })//请求接口进行标识const tokenKey = `${config.method}-${config.url}`//存在可以防抖的情况，取消请求const cancel = debounceTokenCancel.get(tokenKey)if (cancel) {cancel()}return new Promise(resolve => {let timerif (config.method == 'get') {//放行get请求resolve(config)} else if (config.method == 'post') {//开始节流const nowTime = new Date().getTime()if (nowTime - lastTime < 1000) {ElMessage.error({showClose: true,message: $t('text.Common.l25'),type: 'error',})return Promise.reject(new Error('节流处理中，稍后再试'))} else {//开始防抖lastTime = nowTimetimer = setTimeout(() => {clearTimeout(timer)resolve(config)}, 10)//发生重复请求，进行取消debounceTokenCancel.set(tokenKey, () => {clearTimeout(timer)resolve(new Error('取消请求'))})}}})
}, error => {console.log(error)return Promise.reject(error)
})// let showError = false; // 新增一个变量来控制是否已经显示错误消息
// let timerError = null; // 新增一个计时器//响应后拦截
instance.interceptors.response.use(response => {if (response.data.code === 0) {return response.data.data} else {//跳转到登陆页面if (response.data.code == 402 || response.data.code == 401) {routes.push({ path: '/login' })}ElMessage.error({showClose: true,message: response.data.msg,type: 'error',})// if (!showError) { // 如果错误消息未显示//     ElMessage.error({//         showClose: true,//         message: response.data.msg,//         type: 'error',//     })//     showError = true; // 设置为已显示//     // 设置一个计时器，在一段时间后重置 showError//     timerError = setTimeout(() => {//         showError = false;//         clearTimeout(timerError);//     }, 1000); // 1000毫秒后重置// }}//return response
}, error => {//其它异常处理if (JSON.stringify(error).includes('500')) {ElMessage.error({showClose: true,message: $t('text.Common.l26'),type: 'error',})}return Promise.reject(error)
})export default instance

api.js：

import request from "./request.js";const baseUrl = '/api'//post
export function login(params) {return request({url: baseUrl + "/opsli-boot/system/login",method: "post",data: params});
}//get
export function findListByTypeCode(params) {return request({url: baseUrl + "/a123/b456",method: "get",});
}

使用： 

        
import { getKey } from '../../http/api'getKey().then(res => {//在request进行了拦截，如果请求没成功是不返回的，判断成功时一定要判断res !== undefinedif (res !== undefined) {console.log(res)}}).catch()