登录信息失效后多次请求提示合并成一次

在通常的业务场景中经常会出现进入页面之后一次性发送好多个请求,如果登录信息失效,那就会出现很多提示

类似这种多个提示的,看起来不美观,希望改成可以把在短时间内出现相同的错误信息,只提示一次,其他的就不提示了

实现思路

1. 通常业务中每一个请求的code都是有具体的意思,可以把每一个请求返回的code昨晚一个key存到map里面
2. 规定一个时间,在这个时间内重复出现的就不提示了
3. 每次进来的时候查看map里有没有对应的code值
4. 没有的话就把code作为键存起来,当前的时间戳作为值
5. 有的话就进行判断有没有超过之前规定的时间,超过了删除map中对应的code值,然后重新调用一下,重新提示一下

import axios from 'axios';
import { Message } from 'element-ui'
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    // if (store.getters.token) {
    //   config.headers['X-Token'] = getToken();
    // }
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);

let weakMap = new Map()

function tips(response){
    let {code,msg} = response
    const dealy = 2000
    // 先查看之前有没有缓存
    if(weakMap.get(code)){
        let globalData = weakMap.get(code)
        let currentData= Date.now();
        // 如果当前的请求返回的时间超过延时时间,把里面的缓存清除,然后重新提示一下
        if(currentData - globalData >= dealy){
            weakMap.delete(code)
            // 重新提示一下
            tips(response)
        }
    }else{
        weakMap.set(code, Date.now())
        Message({
            message: msg,
            type: 'error',
        });
    }
}
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const {code,msg} = response.data;
    console.log(code)
    tips(response.data)
   
    return response;
  },
  error => {
    console.log('err' + error); // for debug
    // Message({
    //   message: error.message,
    //   type: 'error',
    //   duration: 5 * 1000
    // });
    return Promise.reject(error);
  }
);
 
export default service;

改造完成之后的效果