JS中如何處理異步操作

在JavaScript中，處理異步操作的常見方法有以下幾種：

1. 回調函數（Callback）： 在異步操作完成時調用一個預先定義好的函數。這是最基本的異步處理方式。

function asyncOperation(callback) {
  setTimeout(() => {
    const result = '異步操作結果';
    callback(result);
  }, 1000);
}

asyncOperation((result) => {
  console.log('回調函數接收到結果:', result);
});

2. Promise： 使用Promise對象來表示異步操作的最終結果。Promise有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失?。?。通過.then()和.catch()方法來處理成功或失敗的結果。

function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = '異步操作結果';
      resolve(result); // 成功時調用resolve
      // reject('出錯了'); // 失敗時調用reject
    }, 1000);
  });
}

asyncOperation()
  .then((result) => {
    console.log('Promise成功:', result);
  })
  .catch((error) => {
    console.log('Promise失敗:', error);
  });

3. async/await： 使用async關鍵字聲明一個異步函數，并在函數內部使用await關鍵字等待Promise的結果。這種方式可以讓異步代碼看起來更像同步代碼。

async function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = '異步操作結果';
      resolve(result);
    }, 1000);
  });
}

async function main() {
  try {
    const result = await asyncOperation();
    console.log('async/await成功:', result);
  } catch (error) {
    console.log('async/await失敗:', error);
  }
}

main();

4. 事件監聽： 對于某些異步操作，可以使用事件監聽器來處理結果。例如，XMLHttpRequest對象在請求完成時會觸發load事件。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const result = JSON.parse(xhr.responseText);
    console.log('事件監聽成功:', result);
  }
};
xhr.send();

這些方法可以根據具體需求和場景選擇使用，以實現更好的異步處理效果。