Javascript not catching error using fetch

Question

I have an authService which has the following fetch

export const handleForm = () => {

    return fetch('http://localhost:5000/login')
        .then(response => {
            if (!response.ok) {
                throw new Error("Email or password incorrect");
            } else {
                return response.json();
            }
        })
        .then(json => json)
        .catch(error => error);
};

I'm calling the method from my controller:

form.onsubmit = function (e) {
    handleForm(e)
        .then(response => {
            console.log(response);
            //setAuthenticatedUser(response);
            // setDomUser(response.user);
        })
        .catch(error => {
            console.log(error);
            document.querySelector('#error').innerHTML = error;
        })
};

I've tried a few things to get the error in my catch, in the controller But I keep getting the response callback fired. The error from my authService isn't being caught

I've Tried

throw new Error();
Promise.reject();

That's it. How could i've missed that? Care to make an answer, and explain, so I can accept it? — Miguel Stevens, Dec 22 '18 at 15:41

score 3 · Accepted Answer · answered Dec 22 '18 at 15:47

3

See Promise.prototype.catch():

Syntax Section
p.catch(onRejected);
[...]

The Promise returned by catch() is rejected if onRejected throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.

Using .catch(error => error) as a callback returns the exception. So it neither "throws an error" nor "returns a Promise which is itself rejected". The promise returned by it is thus resolved, not rejected.

Simply remove .catch(error => error) and it will work. And when you're at it, also remove .then(json => json) as it is useless.

answered Dec 22 '18 at 15:47

str

42,689
17
109
127

I'm trying to make sense of this. What If I kept the catch() block, just for learning purposed, how should I 'refactor' it so it does get catched? – Miguel Stevens Dec 22 '18 at 16:10
@Notflip Check the (examples from the) link – Andreas Dec 22 '18 at 16:19
1

@Notflip `catch(e => {throw e})` or `catch(e => Promise.reject(e))`. – str Dec 23 '18 at 11:30

Javascript not catching error using fetch

I've Tried

1 Answers1

Syntax Section