Wie gehe ich mit Nicht-OK-Statuscodes mit Fetch in Redux und Redux-Promise-Middleware um?

Abrufen: Umgang mit Nicht-OK-Statuscodes mit Ablehnung und Fehlererkennung

Der bereitgestellte Code nutzt die Polyfüllung „whatwg-fetch“ in Redux und Redux-Promise-Middleware für den Datenabruf. Das Problem liegt jedoch in der Handhabung von Nicht-OK-Statuscodes (4xx und 5xx), da Fetch-Zusagen normalerweise nur bei Netzwerkfehlern abgelehnt werden.

Ablehnungsbehandlung

Um sicherzustellen Wenn Sie das Versprechen mit einer benutzerdefinierten Fehlermeldung für Nicht-OK-Statuscodes ablehnen, sollten Sie den folgenden Ansatz in Betracht ziehen:

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;
                })
        });
    };
}

Fehlererkennung

Im Aktionsersteller ein Ein Fehler wird ausgelöst, wenn der Antwortstatus nicht OK ist. Dieser Fehler kann bei der Verarbeitung der Aktion im Reduzierer abgefangen werden.

Beispielreduzierer:

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,
    };
}

In diesem aktualisierten Code enthält die Nutzlast der Aktion „FETCH_VEHICLE_REJECTED“ die im Aktionsersteller erstellte Fehlermeldung. Dies ermöglicht eine ordnungsgemäße Fehlerbehandlung und -anzeige innerhalb der Anwendung.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Nicht-OK-Statuscodes mit Fetch in Redux und Redux-Promise-Middleware um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!