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

我正在从我的 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;
        })
};

我尝试了一些方法来在 Controller 中捕获错误 但我不断收到响应回调。 我的 authService 错误未被捕获

我已经尝试过

• 抛出新的Error();
• Promise.reject();

Answer 1

参见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.

使用.catch(error => error)作为回调返回异常。所以它既不会“抛出错误”，也不会“返回一个本身被拒绝的 Promise”。它返回的 promise 因此被解决，而不是被拒绝。

只需删除 .catch(error => error) 即可。当你这样做时，还要删除 .then(json => json) 因为它没有用。