I am making multiple dispatch call in the homepage

Its was something like this.

useEffect(() => {
        async function getStorageData() {
            setLoading(true);
            try {
                await dispatch(fetchProductA());
                await dispatch(fetchProductB());
                await dispatch(fetchProductC());
                await dispatch(fetchProductD());
                await dispatch(fetchProductE());
                await dispatch(fetchProductF());
             } catch (err) {
            console.log(err);
        } finally {
            setLoading(false);
        }
    }
    getStorageData();
}, []);

I am making multiple dispatch call in the homepage

The problem is that when calling the these api. I got an error when productC.

When that happen the function stop calling the remaining product D and E and throw an error. How can I make so that it will not break the api call.

Here is my api call.

export const fetchProductC = () => dispatch => {
    return axios
        .get('productsapi/getProductC', {
            headers: {
                'Content-Type': 'application/json',
            },
        })
        .then(res => {
            dispatch({
                type: FETCH_PRODUCTS_C,
                payload: res.data[0].Groups[0].Products,
                payGroup: res.data[0],
            });
        })
        .catch(err => {
            console.log('fetching new product error');
            throw err;
        });
};

The problem is that when calling the these api. I got an error when productC.

When that happen the function stop calling the remaining product D and E and throw an error. How can I make so that it will not break the api call.