2024-08-30 JavaScript 系列五：第5課 ── 學會 AJAX 錯誤處理

發表於 分類於 閱讀次數：
2024-08-30 JavaScript 系列五：第5課 ── 學會 AJAX 錯誤處理

JavaScript 系列五：第5課 ── 學會 AJAX 錯誤處理
課程目標
認識 AJAX 錯誤處理

課程內容
在前一課，我們說過以下的話

有些任務現在還不會立刻執行，但我先把要執行的任務交待清楚，時間點到的時候，就執行

以 UI 動作來說，時間點就是 onclick 之時、onchange 之時

以 AJAX 動作來說，時間點就是 拿到主機回應 之時

實際上，AJAX 的時間點，除了 拿到主機回應 之時，還有一個，就是 發現主機回應失敗 之時

把原本的範例

1
2
3
4
5
6
7
8
9
10
11
fetch('https://fakestoreapi.com/users/1')
  .then(res=>res.json())
  .then(json=>console.log(json))
故意打錯字試試看，然後加上錯誤處理機制

fetch('https://fakestoreapi.com/users1')
  .then(res=>res.json())
  .then(json=>console.log(json))
  .catch(error => {
    alert(error);
  })

就跟 .then() 函式把任務傳進去類似，.catch() 一樣是把任務傳進去，只是改傳「AJAX 失敗的時候要執行的任務」

這邊只是舉例，才故意打錯字

實務上，AJAX 失敗可能是

主機故障、或者過度忙碌無法回應
呼叫 API 時，登入驗證資訊過期
API 設計成有額度限制，用戶額度耗完了，被主機拒絕
用戶自己的網路斷線了（網頁打開時正常，但發送 AJAX 時已斷線）
等等很多可能，要看 API 主機是如何設計的

實務上，.catch() 內要提醒使用者，剛才的動作失敗，請他重新嘗試

我個人通常就用 alert 跳一個訊息「抱歉，系統出現錯誤，請稍後重新嘗試。若持續出錯，請聯絡客服信箱」就結束了

但在公司的大型專案，需要更好 UX 的話，請與設計師討論後決定如何優雅地處理錯誤情境

課後作業
接續前一課的作業，請加上錯誤處理機制

用 alert 跳出 抱歉，請稍後重新嘗試。 就好了

接著，請把電腦的 wifi 或有線網路，斷線

然後點擊「Load Products」按鈕，應該會看到錯誤提示訊息

做出以上功能，你就完成這次的課程目標了！

原文取自: https://codelove.tw/@howtomakeaturn/post/yx0Ag3 by 站長阿川