首頁 > web前端 > js教程 > JavaScript:非同步/等待

JavaScript:非同步/等待

Mary-Kate Olsen
發布: 2024-11-29 12:06:12
原創
546 人瀏覽過

async 和await 是JavaScript 中強大的功能,它們使Promises 的使用變得更容易、更易讀。它們允許您編寫外觀和行為類似於同步程式碼的非同步程式碼。這是一個快速概述:

非同步函數

  • 定義:非同步函數是傳回 Promise 的函數。它允許您在其中使用await。
  • 文法
  async function myFunction() {
    // Your code here
  }
登入後複製

等待關鍵字

  • 定義:await 關鍵字只能在非同步函數內部使用。它暫停非同步函數的執行並等待 Promise 解析或拒絕。
  • 文法
  let result = await somePromise;
登入後複製

例子

這是一個簡單的範例來示範 async 和 wait 如何協同工作:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

async function getData() {
  console.log('Fetching data...');
  const data = await fetchData();
  console.log(data);
}

getData();
登入後複製

在此範例中:

  1. fetchData 是一個傳回 Promise 的函數,該 Promise 會在 2 秒後解析。
  2. getData 是一個非同步函數,它使用await 等待fetchData 解析。
  3. 當呼叫 getData 時,它會記錄“正在取得資料...”,等待 fetchData 解析,然後記錄“已取得資料”。

好處

  • 可讀性:async/await讓非同步程式碼看起來更像同步程式碼,更容易閱讀和理解。
  • 錯誤處理:您可以使用帶有 async/await 的 try...catch 區塊來更乾淨地處理錯誤。

錯誤處理範例

async function getData() {
  try {
    console.log('Fetching data...');
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

getData();
登入後複製

在此範例中,如果 fetchData 被拒絕,錯誤將被 catch 區塊捕獲,並且「Error fetching data:」將與錯誤訊息一起記錄。


感謝您的閱讀!
我希望這篇文章對您有所幫助且內容豐富。如果您喜歡它或學到了新東西,請隨時在評論中分享您的想法或與我聯繫。

如果您想支持我的工作並幫助我創建更多這樣的內容,請考慮為我買杯咖啡。您的支持意味著整個世界,讓我充滿動力!

再次感謝您的光臨! ?

Javascript: async/await

以上是JavaScript:非同步/等待的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板