ant design pro （十三）advanced 錯誤處理

一、概述

原文地址：https://pro.ant.design/docs/error-cn

二、詳細

2.1、頁面級報錯

2.1.1、應用場景

• 路由直接引導到報錯頁面，比如你輸入的網址沒有匹配到任何頁面，可以由路由引導到預設的 404 頁面。

• 代碼控制跳轉到報錯頁面，比如根據請求返回的數據，將沒有權限的用戶引導到 403 頁面。

2.1.2、實現

針對頁面級的報錯，我們提供了兩個業務組件供你選擇，可以很方便地實現一個報錯頁面：

• Exception 異常頁

<Exception type="404" />

默認支持 404，403，500 三種錯誤，也可自定義文案等內容。

• Result 結果頁

  <Result
    type="error"
    title="提交失敗"
    description="請核對並修改以下信息后，再重新提交。"
    actions={<Button size="large" type="primary">返回修改</Button>}
  />

  這個組件一般用在提交結果展示，文案操作等均可自定義。
  　　腳手架默認會將無法匹配到頁面的網址引導到預設的 404 頁面，如果需要自定義此頁面，可以修改這個文件 ./src/routes/Exception/404.js，相關的路由配置在這里 BasicLayout.js#L362

2.2、提示性報錯

2.2.1、應用場景

• 表單項校驗報錯。

• 操作反饋。

• 網絡請求錯誤。

2.2.2、實現

關於表單項報錯，請參考 antd Form 中的實現。對於操作反饋和網絡請求錯誤提示，有一些組件可能會用到：

• Alert

• message

• notification

在單頁應用中，最常見的需求就是處理網絡錯誤信息，我們可以利用 message 和 notification 來吐出響應的接口/網絡/業務數據錯誤。

import fetch from 'dva/fetch';
import { notification } from 'antd';

...

fetch(url)
  .then(response => response.json())
  .catch((error) => {
    // 處理接口返回的數據格式錯誤的邏輯
    if (error.code) {
      notification.error({
        message: error.name,
        description: error.message,
      });
    }
    if ('stack' in error && 'message' in error) {
      notification.error({
        message: `請求錯誤: ${url}`,
        description: error.message,
      });
    }
    return error;
  });

Ant Design Pro 封裝了一個 request.js 統一處理請求，完整代碼可參考：https://github.com/ant-design/ant-design-pro/blob/master/src/utils/request.js