umi-request全局錯誤攔截

umi-request默認使用了antd的notification錯誤提示
這里在手機端使用的,改成了antd-mobile的Toast錯誤提示

1、在src下創(chuàng)建errorHandler.js文件,添加提示內(nèi)容和提示方式

import { Toast } from 'antd-mobile';

const codeMessage = {
  200: '服務(wù)器成功返回請求的數(shù)據(jù)。',
  201: '新建或修改數(shù)據(jù)成功。',
  202: '一個請求已經(jīng)進入后臺排隊(異步任務(wù))。',
  204: '刪除數(shù)據(jù)成功。',
  400: '發(fā)出的請求有錯誤,服務(wù)器沒有進行新建或修改數(shù)據(jù)的操作。',
  401: '用戶沒有權(quán)限(令牌、用戶名、密碼錯誤)。',
  403: '用戶得到授權(quán),但是訪問是被禁止的。',
  404: '發(fā)出的請求針對的是不存在的記錄,服務(wù)器沒有進行操作。',
  406: '請求的格式不可得。',
  410: '請求的資源被永久刪除,且不會再得到的。',
  422: '當(dāng)創(chuàng)建一個對象時,發(fā)生一個驗證錯誤。',
  500: '服務(wù)器發(fā)生錯誤,請檢查服務(wù)器。',
  502: '網(wǎng)關(guān)錯誤。',
  503: '服務(wù)不可用,服務(wù)器暫時過載或維護。',
  504: '網(wǎng)關(guān)超時。',
};

/**
 * 異常處理程序
 */
const errorHandler = (error) => {
  const { response } = error;
  const { status, statusText } = response ?? {};

  if (status < 200 || status >= 300) {
    response.json().then(res => {
      const { message } = res || {};
      const msg = message || codeMessage[status] || statusText;

      Toast.fail(msg, 2);
    });
  }
};

export default errorHandler;

2、在src下創(chuàng)建app.js,添加配置

import errorHandler from './errorHandler';

export const request = {
  errorHandler,
};
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 以往搭建React應(yīng)用時往往使用官方推薦的 # create-react-app 不過使用官方的腳手架往往不能很好...
    citteey閱讀 21,430評論 1 5
  • 使用umi框架是,網(wǎng)絡(luò)請求用自帶的request進行二次封裝,核心代碼如下。直接放在src下的app.js中即可
    李傲娢閱讀 9,339評論 1 6
  • 前言 團隊合作臨摹餓了么移動端APP,選擇了現(xiàn)在比較熱門的React框架,雖然項目功能還不完善,但是在開發(fā)的過程中...
    視覺派Pie閱讀 17,307評論 7 90
  • 介紹 最近開發(fā)了一個react項目,因為之前都是做原生混合H5開發(fā),對redux用的不怎么熟練,這次想要鍛煉下然后...
    Jadeite2閱讀 29,522評論 31 57
  • 介紹umi umi官方文檔 初探 對比以往使用的 create-react-app 搭建react項目,根據(jù)需要我...
    koala949閱讀 13,690評論 0 2

友情鏈接更多精彩內(nèi)容