后台管理系统中如何对不同的相应错误配置不同的提示?

在写后台系统时候,请教个问题

一般会在全局的请求相应拦截里面进行Elmessage的toast提示

如果有些请求我想进行弹窗提示,
有些请求进行tosat提示
该怎么做,要跟后端进行约定么还是怎样,有可以借鉴的例子么

还请教一个问题,如果某一时刻有多个请求,如何让请求toast保持一个

阅读 1.6k
1 个回答

在后台管理系统中,对不同的响应错误配置不同的提示,可以在前端的请求拦截器中进行处理。以下是一个使用 Axios 和 Element UI 的示例:

import axios from 'axios';
import { Message, MessageBox } from 'element-ui';

const instance = axios.create({
  baseURL: 'https://your-api-base-url',
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在这里可以添加一些自定义的请求头,例如认证令牌
    config.headers.Authorization = 'your-auth-token';
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.error(error);
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    const data = response.data;

    // 根据后端约定的数据格式,检查响应中的错误代码
    if (data.code !== 200) {
      // 弹窗提示
      if (data.code === 500) {
        MessageBox.alert(data.message, '服务器错误', {
          confirmButtonText: '确定',
        });
      } else {
        // Toast 提示
        Message.error(data.message);
      }

      return Promise.reject(new Error(data.message || 'Error'));
    } else {
      return data;
    }
  },
  error => {
    console.error('err' + error); // for debug
    Message.error(error.message);
    return Promise.reject(error);
  }
);

export default instance;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题