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

最新推荐文章于 2025-02-12 09:55:41 发布

代码少女Zik -

最新推荐文章于 2025-02-12 09:55:41 发布

阅读量562

点赞数 2

文章标签： javascript 开发语言 vue.js

本文链接：https://blog.youkuaiyun.com/m0_62087405/article/details/137561586

版权

本文介绍了如何在前端开发中，通过封装单例提示信息框和利用http响应拦截器，处理同一个页面调用不同接口时可能出现的错误，确保用户界面在接口报错时仅显示一次警告，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

我们系统用的是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里用定时器变量和单例提示框共同实现多个错误提示时只展示一个框。

仅供参考~~