Home > Web Front-end > JS Tutorial > How to Handle Non-OK Status Codes with Fetch in Redux and redux-promise-middleware?

How to Handle Non-OK Status Codes with Fetch in Redux and redux-promise-middleware?

DDD
Release: 2024-11-15 14:52:02
Original
1038 people have browsed it

How to Handle Non-OK Status Codes with Fetch in Redux and redux-promise-middleware?

Fetch: Handling Non-OK Status Codes with Rejection and Error Catching

The provided code utilizes the 'whatwg-fetch' polyfill within Redux and redux-promise-middleware for data retrieval. However, the issue lies in handling non-OK status codes (4xx and 5xx), as Fetch promises typically only reject on network errors.

Rejection Handling

To ensure rejection of the promise with a custom error message for non-OK status codes, consider the following approach:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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;

                })

        });

    };

}

Copy after login

Error Catching

Within the action creator, an error is thrown when the response status is non-OK, and this error can be caught when handling the action in the reducer.

Sample Reducer:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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,

    };

}

Copy after login

In this updated code, the payload of the 'FETCH_VEHICLE_REJECTED' action will contain the error message created in the action creator. This allows for proper error handling and display within the application.

The above is the detailed content of How to Handle Non-OK Status Codes with Fetch in Redux and redux-promise-middleware?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template