javascript的異步操作方法是什么

# JavaScript的異步操作方法是什么

## 目錄
1. [引言](#引言)
2. [同步與異步編程基礎](#同步與異步編程基礎)
3. [回調函數（Callbacks）](#回調函數callbacks)
4. [Promise對象](#promise對象)
5. [Async/Await語法](#asyncawait語法)
6. [事件監聽（Event Listeners）](#事件監聽event-listeners)
7. [Generator函數](#generator函數)
8. [Web Workers](#web-workers)
9. [異步編程最佳實踐](#異步編程最佳實踐)
10. [常見問題與解決方案](#常見問題與解決方案)
11. [總結](#總結)

---

## 引言
JavaScript作為單線程語言，通過異步操作實現非阻塞式編程。本文將系統介紹7種主流異步方案及其應用場景。

---

## 同步與異步編程基礎
### 同步編程特點
```javascript
console.log("步驟1");
console.log("步驟2"); // 必須等待步驟1完成

異步編程優勢

console.log("啟動請求");
setTimeout(() => console.log("請求完成"), 1000);
console.log("繼續執行"); // 不等待定時器

關鍵差異： - 同步：阻塞式執行 - 異步：非阻塞式執行 - 執行順序：同步代碼 > 微任務 > 宏任務

回調函數（Callbacks）

基本模式

function fetchData(callback) {
  setTimeout(() => {
    callback('數據加載完成');
  }, 1000);
}

實際應用（Node.js文件讀?。?/h3>

const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

回調地獄問題

getUser(id, user => {
  getOrders(user, orders => {
    getItems(orders, items => {
      // 嵌套層級持續加深
    });
  });
});

解決方案： - 拆分為命名函數 - 使用Promise/Async

Promise對象

三種狀態

const promise = new Promise((resolve, reject) => {
  if (success) {
    resolve(value);
  } else {
    reject(error);
  }
});

鏈式調用

fetch('/api/data')
  .then(response => response.json())
  .then(data => processData(data))
  .catch(error => handleError(error));

常用靜態方法

Promise.all([p1, p2]).then(values => {});
Promise.race([p1, p2]).then(first => {});

Async/Await語法

基本用法

async function loadData() {
  try {
    const response = await fetch('/api');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

并行執行優化

async function parallel() {
  const [res1, res2] = await Promise.all([
    fetch(url1),
    fetch(url2)
  ]);
}

事件監聽（Event Listeners）

DOM事件示例

button.addEventListener('click', () => {
  console.log('按鈕被點擊');
});

自定義事件系統

const emitter = new EventEmitter();
emitter.on('data', data => handleData(data));
emitter.emit('data', payload);

Generator函數

基本結構

function* gen() {
  yield '第一步';
  yield '第二步';
  return '完成';
}
const g = gen();
g.next(); // { value: '第一步', done: false }

異步應用

function* fetchUser() {
  const user = yield fetch('/user');
  const posts = yield fetch('/posts');
}

Web Workers

主線程代碼

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = e => console.log(e.data);

Worker腳本

// worker.js
self.onmessage = function(e) {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

異步編程最佳實踐

1. 錯誤處理必須完善
2. 避免過度嵌套
3. 合理使用Promise.all加速
4. 重要操作添加超時控制
5. 使用async_hooks（Node.js）進行追蹤

常見問題與解決方案

問題1：未捕獲的Promise拒絕

解決方案：

process.on('unhandledRejection', error => {});

問題2：回調多次執行

防護方案：

function once(callback) {
  let called = false;
  return (...args) => {
    if (!called) {
      called = true;
      callback(...args);
    }
  };
}

總結

未來趨勢：Top-Level Await、Observable等新特性正在普及。 “`