如何在 Redux 和 redux-promise-middleware 中使用 Fetch 处理非 OK 状态代码？

Fetch：通过拒绝和错误捕获处理非正常状态代码

提供的代码利用 Redux 中的 'whatwg-fetch' 填充和 redux-promise-middleware 用于数据检索。然而，问题在于处理非 OK 状态代码（4xx 和 5xx），因为 Fetch Promise 通常只会在网络错误时拒绝。

拒绝处理

确保对于非 OK 状态代码，使用自定义错误消息拒绝承诺，请考虑以下方法：

import 'whatwg-fetch';

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(res => res.json())
                .then(data => {
                    if (!res.ok) {
                        throw new Error(`Non-OK status code: ${res.status}`);
                    }
                    return data;
                })
                .catch(error => {
                    throw error;
                })
        });
    };
}

错误捕获

在操作创建者中，当响应状态为非OK时会抛出错误，在reducer中处理action时可以捕获此错误。

示例Reducer：

case 'FETCH_VEHICLE': {
    return {
        ...state,
        isLoading: true,
    };
}
case 'FETCH_VEHICLE_FULFILLED': {
    return {
        ...state,
        isLoading: false,
        vehicle: action.payload,
    };
}
case 'FETCH_VEHICLE_REJECTED': {
    return {
        ...state,
        isLoading: false,
        error: action.payload,
    };
}

在此更新的代码中，“FETCH_VEHICLE_REJECTED”操作的有效负载将包含在操作创建者中创建的错误消息。这允许在应用程序中进行正确的错误处理和显示。

以上是如何在 Redux 和 redux-promise-middleware 中使用 Fetch 处理非 OK 状态代码？的详细内容。更多信息请关注PHP中文网其他相关文章！