Bagaimana untuk Mengendalikan Kod Status Bukan OK dengan Fetch dalam Redux dan redux-promise-middleware?

Ambil: Mengendalikan Kod Status Tidak OK dengan Penolakan dan Ralat Penangkapan

Kod yang disediakan menggunakan poliisi 'whatwg-fetch' dalam Redux dan redux-promise-middleware untuk mendapatkan semula data. Walau bagaimanapun, isunya terletak pada pengendalian kod status bukan OK (4xx dan 5xx), seperti yang dijanjikan Fetch biasanya hanya menolak pada ralat rangkaian.

Pengendalian Penolakan

Untuk memastikan penolakan janji dengan mesej ralat tersuai untuk kod status bukan OK, pertimbangkan pendekatan berikut:

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

Ralat Menangkap

Dalam pencipta tindakan, ralat dilemparkan apabila status respons tidak OK, dan ralat ini boleh ditangkap semasa mengendalikan tindakan dalam pengurang.

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

Dalam kod yang dikemas kini ini, muatan tindakan 'FETCH_VEHICLE_REJECTED' akan mengandungi mesej ralat yang dibuat dalam pencipta tindakan. Ini membolehkan pengendalian dan paparan ralat yang betul dalam aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Kod Status Bukan OK dengan Fetch dalam Redux dan redux-promise-middleware?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!