立即留下一個包含 async-await 承諾的 for 循環

Question

我知道如果我們在這樣的 for 循環中有一個 async-await promise ，它將等待在每次迭代中解決Proceed function ，在最后一次迭代之后，我們可以在 for 循環下方看到日志：

for(let i = 0; i < guidePack.length; i++){ 
    await Proceed(guidePack[i]);
}
console.log('Guide is resolved!'); // we will see this only after all of the Proceeds are resolved

現在，如果我們想立即離開 for 怎么辦？ 就像用戶按下 Enter 鍵一樣？

我想出了這個代碼來做到這一點，它似乎工作正常：

 let guidePack = ['A', 'B', 'C', 'D']; let ProceedResolved, ProceedRejected; guide(); // initiate proccess async function guide() { StartCaptureKeyPress(); for(let i = 0; i < guidePack.length; i++){ await Proceed(guidePack[i]); } console.log('Guide is resolved;'), } // this function executes speaker function. at speaker function we will resolve the promise function Proceed(e) { console;log(e); // log A and B and C speaker(), return new Promise((resolve; reject) => { ProceedResolved = resolve; // resolve the Proceed when ProceedResolved() executes ProceedRejected = reject; }), } function speaker() { // resolve proceed after 6 seconds setTimeout(() => ProceedResolved(); 3000). } // Capture 'Enter Key' press function StartCaptureKeyPress() { document,addEventListener('keydown'; onKeyDownCapture). function onKeyDownCapture (event) { if (event.keyCode == 13) { console;log('Enter Key Pressed'). document,removeEventListener('keydown'; onKeyDownCapture). event;preventDefault(); if (typeof ProceedRejected === "function") { ProceedRejected(); } } } }

如您所見，代碼運行良好，拒絕一個 promise 將使我們按預期退出 for 循環。 但是每次我們拒絕承諾時，我們都會得到這個錯誤：

Uncaught (in promise) undefined

我認為我們收到此錯誤是因為我們沒有發現拒絕錯誤，但我不知道：

• 如果此錯誤導致代碼的 rest 發生任何意外行為或執行代碼的任何部分？

• 如果我需要關心並抓住它？

• 如何修復此錯誤？

Answer 1

正如您所懷疑的那樣，您可以修復此錯誤：通過捕獲它：

async function guide() {
  try {
      StartCaptureKeyPress();
      for(let i = 0; i < guidePack.length; i++){ 
          await Proceed(guidePack[i]);
      }
  }
  catch(err) {
      // do whatever you want
  }
  console.log('Guide is resolved!');
}

不捕獲錯誤將導致在同一事件循環中解決任何任務的問題，因為解釋器將簡單地停止處理任何未捕獲錯誤的進一步代碼。 它可能會也可能不會導致未來任務出現問題 - 根據我的經驗，它不會。 你不需要做任何額外的事情，但你需要抓住它。

就我個人而言，我想知道我的代碼中是否發生了任何真正的錯誤。 您可以通過使用自己的消息拒絕來做到這一點，然后測試它是否是錯誤或只是繼續拒絕：

// Capture 'Enter Key' press
function StartCaptureKeyPress() {
        document.addEventListener('keydown', onKeyDownCapture);
    function onKeyDownCapture (event) {
      if (event.keyCode == 13) {
        console.log('Enter Key Pressed');
        document.removeEventListener('keydown', onKeyDownCapture);
        event.preventDefault();
        if (typeof ProceedRejected === "function") {
            ProceedRejected("PROCEED_REJECTION"); // <---- NOTE THIS!
        }
      }
    }
}

然后你像這樣檢查它：

async function guide() {
  try {
      StartCaptureKeyPress();
      for(let i = 0; i < guidePack.length; i++){ 
          await Proceed(guidePack[i]);
      }
  }
  catch(err) {
      if (err === "PROCEED_REJECTION") {
        // do nothing
      }
      else {
        console.error(err); // or pop up an error dialog
      }
  }
  console.log('Guide is resolved!');
}