一个页面不同接口返回报错很多的情况下，只展示一条提示框

同一个页面调不同的接口，如果接口报错的情况下，会返回很多报错信息，

这样用户体验感不太好，解决这个问题，包装一个单例的提示信息框，

我们系统用的是vxeTable的modal弹框，其他的也是同理，可参考。

先封装方法 

/**
 * alert弹窗单例提示 如果已经有弹框则不再弹出
 * @param {*} content // 提示的内容
 * @param {*} title // 提示框的title
 * @param {*} status // 提示的状态 传值有：info warning question success error loading
 */
export const fmisAlertSingle = (title: string, content: string, status: any, okCallBack?: any) => {
  // 判断当前页是否有vxealert标签，如果没有则执行弹窗操作
  if (document.getElementsByClassName('vxe-modal-single').length === 0) {
    VXETable.modal
      .alert({
        title,
        content,
        status,
        zIndex: 3000,
        className: 'vxe-modal-single', // 自定义一个比较特殊的className
        destroyOnClose:true,
      })
      .then((resopnse) => {
        closeLoading();
        if (okCallBack && resopnse === 'confirm') {
          okCallBack();
        }
      });
  }
};

封装好的方法，在接口返回时，使用此方法

打开http.ts文件

http.interceptors.response.use(
  (response) => {
    // 返回时的其他操作 正常返回 
  },
  (error) => {
    //  返回错误时 
    const status = getValueByKeys(error, 'response.status', 500);
    const httpCodeLabel: IObject<string> = {
      400: '请求参数错误',
      401: '未授权，请登录',
      403: '拒绝访问',
      404: `请求地址出错: ${getValueByKeys(error, 'response.config.url', '')}`,
      408: '请求超时',
      500: 'API接口报500错误',
      501: '服务未实现',
      502: '网关错误',
      503: '服务不可用',
      504: '网关超时',
      505: 'HTTP版本不受支持',
    };
    if (error && error.response) {
      console.error('请求错误', error.response.data);
    }
    if (status === 401) {
      redirectLogin();
    } else if (status == 503) {
        // 用定时器变量 和 单例提示框共同实现
        if (timeOutFlag == 0) {
          fmisAlertSingle('提示消息', error.response , 'warning');
          timeOutFlag = 1;
          if (timerOut) {
            clearTimeout(timerOut);
          }
          timerOut = setTimeout(() => {
            timeOutFlag = 0;
          }, 3000);
        }
      }
    return Promise.reject(new Error(httpCodeLabel[status] || '接口错误'));
  }
);

以上就是在http里用定时器变量和单例提示框 共同实现 多个错误提示时 只展示一个框。

仅供参考~~