Javascript не перехватывает ошибки при использовании fetch

Question

У меня есть authService со следующей выборкой

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

Я вызываю метод с моего контроллера:

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

Я пробовал несколько вещей, чтобы получитьошибка в моем улове, в контроллере, но я продолжаю получать ответный обратный вызов. Ошибка от моего authService не перехватывается

Я пытался

• выбросить новую ошибку ();
• Promise.reject();

Answer 1

См. Promise.prototype.catch():

Секция синтаксиса

p.catch(onRejected);

[...]

Обещаниевозвращаемый catch() отклоняется, если onRejected выдает ошибку или возвращает Обещание, которое само отклонено;в противном случае оно разрешается.

Использование .catch(error => error) в качестве обратного вызова возвращает исключение.Таким образом, он не «выдает ошибку» и «не возвращает обещание, которое само по себе отклонено».Таким образом, обещание, возвращенное им, разрешается, а не отклоняется.

Просто удалите .catch(error => error), и оно будет работать.И когда вы на это, также удалите .then(json => json), поскольку это бесполезно.