需求:当一个页面中有多个请求,此时用户token失效,这些请求就会同时报很多错误。如下:
解决思路如下:
1.封装api-message:当存在api-message实例时,调用close() 关闭通知
2.封装request函数:在响应拦截器中 调用message
具体代码:
(1) api-message.ts:
import { ElMessage, type MessageParams, type MessageHandler } from "element-plus"
let messageInstance: MessageHandler
const resetMessage = (options: MessageParams) => {
if (messageInstance) {
messageInstance.close()
}
messageInstance = ElMessage(options)
}
export const Message = resetMessage
(2)http.ts:
import axios, { type AxiosResponse, type AxiosInstance } from "axios"
import { Message } from "./api-message";
//创建请求实例类
class BaseRequest {
serveUrl: string //api端口号,作为变量传入实例 可以支持同一页面不同端口请求
instance: AxiosInstance
constructor(serveUrl = circle_api) {
this.serveUrl = serveUrl
this.instance = axios.create({
baseURL: this.serveUrl,
timeout: 30 * 1000,
})
this.instance.interceptors.request.use((config: any) => {
//...请求拦截器
return config
}, (err: any) => {
Promise.reject(err)
})
this.instance.interceptors.response.use(
(response: AxiosResponse) => {
const res = response.data || {}
const { code } = res
if (code === 0) return response.data //code = 0 为 success
//在这里处理业务异常
Message({
message: res.message || "Error",
type: "error",
})
return Promise.reject(res.message || "Error")
},
(error: any) => {
//在这里处理网络异常
Message({
showClose: true,
message: error,
type: "error",
})
return Promise.reject(error)
}
)
}
}
export default new BaseRequest().instance