首頁 > web前端 > js教程 > 如何使用 Fetch Promise 捕獲錯誤:為什麼條件拒絕不起作用?

如何使用 Fetch Promise 捕獲錯誤:為什麼條件拒絕不起作用?

DDD
發布: 2024-11-13 03:36:02
原創
349 人瀏覽過

How to Catch Errors with Fetch Promises: Why Conditional Rejection Doesn't Work?

使用 Fetch Promises 捕獲錯誤:條件拒絕

在 Redux 應用程式中,開發人員經常使用 fetch 來進行非同步請求。但是,請求失敗時處理錯誤可能具有挑戰性,特別是當請求傳回非 OK 狀態代碼時。

考慮以下程式碼片段:

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(status)
                .then(res => res.json())
                .catch(error => {
                    throw(error);
                })
        });
    };
}

function status(res) {
    if (!res.ok) {
        return Promise.reject()
    }
    return res;
}
登入後複製

目標是拒絕如果狀態代碼不正常,則承諾並在減速器中捕獲錯誤。然而,程式碼並沒有按預期工作:promise 沒有被拒絕。

了解 Fetch Promises

網路錯誤時,Fetch Promises 只會拒絕並出現 TypeError 。帶有 4xx 或 5xx 狀態代碼的回應不被視為網路錯誤,因此不會拋出錯誤。

拋出自定義錯誤

要捕獲這些非網路錯誤,如果狀態代碼指示請求失敗,我們可以手動拋出錯誤:

function fetchVehicle(id) {
  return fetch(`http://swapi.co/api/vehicles/${id}/`)
    .then(response => {
      if (!response.ok) {
        throw new Error('Something went wrong');
      }
      return response.json();
    })
    .catch(error => {
      console.log(error);
    });
}
登入後複製

現在,如果請求返回非OK 狀態代碼,它將觸發錯誤處理程序並記錄錯誤訊息。然後reducer就可以適當地處理這個錯誤。

以上是如何使用 Fetch Promise 捕獲錯誤:為什麼條件拒絕不起作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板