溫馨提示×

JavaScript異步編程有哪些常見模式

小樊
90
2024-11-02 05:55:19
欄目: 編程語言

JavaScript異步編程的常見模式有以下幾種:

  1. 回調函數(Callback) 回調函數是異步編程中最常見的模式。在調用異步函數時,傳遞一個函數作為參數,當異步操作完成時,這個函數會被調用。例如:
function asyncOperation(callback) {
  setTimeout(() => {
    const result = '異步操作完成';
    callback(result);
  }, 1000);
}

asyncOperation((result) => {
  console.log(result); // 輸出 "異步操作完成"
});
  1. Promise Promise 是 JavaScript 中用于處理異步操作的一種更高程度的抽象。Promise 可以將回調函數從異步操作中分離出來,使代碼更加易讀和易于維護。例如:
function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = '異步操作完成';
      resolve(result);
    }, 1000);
  });
}

asyncOperation()
  .then((result) => {
    console.log(result); // 輸出 "異步操作完成"
  })
  .catch((error) => {
    console.error(error);
  });
  1. async/await async/await 是 JavaScript 中處理異步操作的另一種語法糖,它基于 Promise。通過使用 async 和 await 關鍵字,可以使異步代碼看起來更像同步代碼。例如:
async function main() {
  try {
    const result = await asyncOperation();
    console.log(result); // 輸出 "異步操作完成"
  } catch (error) {
    console.error(error);
  }
}

main();
  1. 事件監聽(Event Listener) 事件監聽是另一種常見的異步編程模式,主要用于處理用戶交互和系統事件。例如:
document.addEventListener('click', (event) => {
  console.log('按鈕被點擊了');
});
  1. 定時器(Timer) 定時器是用于在指定的時間后執行某個操作的異步編程模式。例如:
setTimeout(() => {
  console.log('定時器觸發');
}, 1000);
  1. Promise.all() 和 Promise.race() Promise.all() 用于等待一組 Promise 全部完成,而 Promise.race() 用于等待一組 Promise 中的任意一個完成。例如:
const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'two'));

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values); // 輸出 ['one', 'two']
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // 輸出 'one'
  })
  .catch((error) => {
    console.error(error);
  });

這些模式可以根據實際需求和場景進行選擇和組合,以實現高效、易讀的異步編程。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女