Vue3+Typescript ElementPlus拦截多余请求报错提示

需求:当一个页面中有多个请求，此时用户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

优化后：