vue 对axios进行封装
token配置、中英文配置、对所有接口统一设置防抖、对所有post接口统一设置节流。
·
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 timer
if (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 = nowTime
timer = 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 !== undefined
if (res !== undefined) {
console.log(res)
}
}).catch()
更多推荐
已为社区贡献2条内容
所有评论(0)