Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mengendalikan Kod Status Bukan OK dengan Fetch dalam Redux dan redux-promise-middleware?

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

DDD
DDDasal
2024-11-15 14:52:021044semak imbas

How to Handle Non-OK Status Codes with Fetch in Redux and 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn