如何使用 Fetch Promise 捕獲錯誤：為什麼條件拒絕不起作用？-js教程-PHP中文網

如何使用 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中文網其他相關文章！