如何根據HTTP狀態碼手動拒絕Fetch Promise？-js教程-PHP中文網

如何根據HTTP狀態碼手動拒絕Fetch Promise？

DDD

發布： 2024-11-10 01:21:02

原創

552 人瀏覽過

How Can I Manually Reject Fetch Promises Based on HTTP Status Codes?

Fetch：基於HTTP 狀態代碼控制Promise 拒絕

在fetch 領域，promise 通常只在遇到網路錯誤時才被拒絕。但是，在傳回 4xx 或 5xx HTTP 狀態碼的情況下，預設情況下不會拒絕承諾。

問題：
在您提供的程式碼中，您嘗試當 HTTP 回應狀態指示錯誤時攔截並拒絕承諾。然而，promise 並沒有如預期般被拒絕。

原因：
當發生網路錯誤時，Fetch Promise 只會拒絕並出現 TypeError。由於 4xx 和 5xx 回應不是網路錯誤，因此沒有什麼可捕獲的。要手動拒絕 Promise，您需要自己拋出錯誤。

解決方案：
要解決此問題並根據HTTP 狀態拒絕Promise，您可以修改程式碼如下：

import 'whatwg-fetch';

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(res => {
                    if (!res.ok) {
                        const error = new Error('HTTP Error: ' + res.status);
                        throw error; // Throwing the error here will cause fetch to reject the promise
                    }
                    return res;
                })
                .then(res => res.json())
                .catch(error => {
                    throw error;
                })
            });
    };
}

登入後複製

透過在fetch Promise 中引入錯誤處理邏輯，現在如果HTTP 回應狀態指示不成功的情況。這允許您在 redux 中間件的 catch 區塊中適當地捕獲和處理錯誤。

以上是如何根據HTTP狀態碼手動拒絕Fetch Promise？的詳細內容。更多資訊請關注PHP中文網其他相關文章！