Javascript 即使捕獲了 promise 中的未捕獲錯誤

Question

使用 Javascript，我試圖在提交表單時調用外部 API。 我正在使用 promises 以便在調用完成后設置后續操作並捕獲最終錯誤。

這就是我的問題所在，即使我認為我正確地捕獲了我的錯誤，控制台也會拋出一個

未捕獲（承諾）錯誤：[我拋出的錯誤]

我不懂為什么。

這是我的代碼的最小版本，它會在 refreshToken 過期時重現錯誤：

try {
        functionGeneratingTheError();
    } catch (error) {
        doSomethingElse();
    }

function functionGeneratingTheError() {
    
    var getTokenCallPayload = {
        "client_id" : clientId,
        "client_secret" : clientSecret,
        "refresh_token" : refreshToken,
        "grant_type" : "refresh_token"
    };
    var getTokenCallOptions = {
        "method" : "POST",
        "body" : JSON.stringify(getTokenCallPayload),
        "muteHttpExceptions" : false
    };
    fetch(tokenURL, getTokenCallOptions)
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error("Error");
        }
    })
    .then(data => {
        doSomething();
    })  
    .then(response=> {
        doSomethingAgain();
    }) 
    .catch(error => {
        throw error;
    });
}

如果我理解正確，當提取是一個錯誤的請求時，它應該拋出錯誤“錯誤”，然后應該在第一個捕獲中捕獲並運行 doSomethingElse() function。但是，我沒有這樣做，而是在瀏覽器控制台“未捕獲（承諾）錯誤：錯誤”

我究竟做錯了什么？

我試過將提取包含在 try{}catch(){} 中，但它沒有改變任何東西。

我也試過不拋出錯誤並直接調用我的 doSomethingElse() function，但隨后失敗，因為數據未定義。

Answer 1

更改您的functionGeneratingTheError GeneratingTheError function 以返回鏈式 promise，如下所示：

function functionGeneratingTheError() {
    
    var getTokenCallPayload = {
        "client_id" : clientId,
        "client_secret" : clientSecret,
        "refresh_token" : refreshToken,
        "grant_type" : "refresh_token"
    };
    var getTokenCallOptions = {
        "method" : "POST",
        "body" : JSON.stringify(getTokenCallPayload),
        "muteHttpExceptions" : false
    };

    return
    fetch(tokenURL, getTokenCallOptions)
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error("Error");
        }
    })
    .then(data => {
        doSomething();
    })  
    .then(response=> {
        doSomethingAgain();
    }) 
    .catch(error => {
        throw error;
    });
}

然后通過將調用代碼包裝在異步自調用 function 中，在您的調用代碼中等待它，如下所示：

(async function() {
try {
        await functionGeneratingTheError();
    } catch (error) {
        doSomethingElse();
    }
})();

您可以在此處閱讀有關異步/等待的更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function