Comment gérer les codes d'état non OK avec Fetch dans Redux et redux-promise-middleware ?

Récupération : gestion des codes d'état non OK avec rejet et détection d'erreurs

Le code fourni utilise le polyfill 'whatwg-fetch' dans Redux et redux-promise-middleware pour la récupération de données. Cependant, le problème réside dans la gestion des codes d'état non OK (4xx et 5xx), car Fetch promet généralement de rejeter uniquement en cas d'erreurs réseau.

Gestion des rejets

Pour garantir rejet de la promesse avec un message d'erreur personnalisé pour les codes d'état non OK, envisagez l'approche suivante :

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

Error Catching

Au sein du créateur d'action, un une erreur est générée lorsque l'état de la réponse n'est pas OK, et cette erreur peut être détectée lors de la gestion de l'action dans le réducteur.

Exemple de réducteur :

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

Dans ce code mis à jour, la charge utile de l'action 'FETCH_VEHICLE_REJECTED' contiendra le message d'erreur créé dans le créateur d'action. Cela permet une gestion et un affichage appropriés des erreurs dans l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!