013-ant design pro advanced 錯誤處理
阿新 • • 發佈:2018-05-01
title 相關 amp desc mar esp 封裝 tle resp 2.1.1、應用場景
2.1.2、實現
2.2、提示性報錯
2.2.1、應用場景
2.2.2、實現
一、概述
原文地址: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 來吐出響應的接口/網絡/業務數據錯誤。
mport 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
013-ant design pro advanced 錯誤處理