Redux 및 redux-promise-middleware에서 Fetch를 사용하여 비정상 상태 코드를 처리하는 방법은 무엇입니까?

가져오기: 거부 및 오류 포착을 통해 비정상 상태 코드 처리

제공된 코드는 Redux 내 'whatwg-fetch' 폴리필을 활용합니다. 데이터 검색을 위한 redux-promise-middleware. 그러나 Fetch Promise는 일반적으로 네트워크 오류 시에만 거부하므로 문제는 OK가 아닌 상태 코드(4xx 및 5xx)를 처리하는 데 있습니다.

거부 처리

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가 아닐 때 오류가 발생하며, 이 오류는 다음과 같은 경우에 잡을 수 있습니다. 리듀서에서 작업을 처리합니다.

샘플 리듀서:

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를 사용하여 비정상 상태 코드를 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!