JavaScript异步编程的演进

一、 为什么需要异步编程？先说说为什么要有异步这回事. JavaScript是单线程的, 也就是说它一次只能做一件事. 如果所有操作都同步执行, 遇到网络请求或者文件读取这种耗时的操作, 页面就会卡住不动, 用户体验直接爆炸. 

// 同步代码的灾难现场const data = fetchDataFromServer(); // 假设这个请求要3秒console.log(data); // 这行代码要傻等3秒才能执行doSomethingElse(); // 更要再等

所以JavaScript采用异步非阻塞的方式处理这类操作: 发起请求后不干等着, 而是继续执行后面的代码, 等请求完成后再来处理结果. 这就引出了我们最原始的处理方式——回调函数.

 二、回调函数的时代1) 基础回调: 

// 最简单的回调示例function fetchData(callback) {  setTimeout(() => {    callback('数据到手啦！');  }, 1000);}
fetchData((data) => {  console.log(data); // 1秒后输出"数据到手啦！"});

2) 回调地狱: 当多个异步操作需要顺序执行时, 代码就会变成这样: 

// 经典回调地狱getUserInfo(userId, function(user) {  getOrders(user.id, function(orders) {    getOrderDetails(orders[0].id, function(details) {      getProductInfo(details.productId, function(product) {        console.log('最终结果:', product);      });    });  });});

这种代码的问题: 

1. 难以阅读和维护(金字塔形状)

2. 错误处理非常麻烦(要在每个回调里处理错误)

3. 无法使用return和throw

4. 无法使用for循环和try/catch

3) 回调的改进尝试

2.1 命名函数, 把匿名回调变成命名函数:

getUserInfo(userId, handleUser);
function handleUser(user) {  getOrders(user.id, handleOrders);}
function handleOrders(orders) {  getOrderDetails(orders[0].id, handleDetails);}// ...虽然可读性好点了，但代码跳来跳去更晕了

2.2 Async.js库, 提供series/parallel/waterfall等流程控制: 

async.waterfall([  function getUser(callback) {    getUserInfo(userId, callback);  },  function getOrders(user, callback) {    getOrders(user.id, callback);  }  // ...], function finalHandler(err, result) {  // 最终处理});

这些方案虽然有一定效果, 但都不够优雅. 直到Promise的出现. 

三、Promise

3.1 Promise直译就是"承诺", 它表示一个异步操作的最终完成或失败. Promise有三种状态: 

1. pending(进行中)

2. fulfilled(已成功)

3. rejected(已失败)

一旦状态改变就不会再变(要么成功要么失败).

const promise = new Promise((resolve, reject) => {  // 异步操作  setTimeout(() => {    if (Math.random() > 0.5) {      resolve('成功数据');    } else {      reject(new Error('失败原因'));    }  }, 1000);});
promise  .then(data => {    console.log('成功:', data);  })  .catch(err => {    console.error('失败:', err);  });

3.2 Promise链式调用, 这是Promise最强大的地方: 

// 用Promise改造回调地狱getUserInfo(userId)  .then(user => getOrders(user.id))  .then(orders => getOrderDetails(orders[0].id))  .then(details => getProductInfo(details.productId))  .then(product => {    console.log('最终结果:', product);  })  .catch(err => {    console.error('出错啦:', err);  });

对比之前的回调地狱, 这种链式调用: 

1. 扁平化, 可读性极佳

2. 错误处理统一(一个catch处理所有错误)

3. 可以使用return传递数据

4. 可以在then里throw error

 

3.3 Promise的静态方法: Promise.all: 等所有Promise都成功. 

Promise.all([promise1, promise2, promise3])  .then(([result1, result2, result3]) => {    // 所有都成功才会到这里  })  .catch(err => {    // 任意一个失败就到这里  });

Promise.race：竞速, 第一个完成的Promise决定结果. 

Promise.race([fetchFromA(), fetchFromB()])  .then(firstResult => {    // 使用最先返回的结果  });

Promise.allSettled: 等所有Promise都完成(无论成功失败).

Promise.allSettled([promise1, promise2])  .then(results => {    results.forEach(result => {      if (result.status === 'fulfilled') {        console.log('成功:', result.value);      } else {        console.log('失败:', result.reason);      }    });  });

3.4 Promise的局限性

虽然Promise很棒, 但还是有不足: 

1. 无法取消Promise.

2. 错误处理虽然比回调好, 但还是要用catch.

3. 多个Promise之间的数据共享不太方便.

4. 调试时堆栈信息不友好.

四、aysnc/awaitasync/await是现代JavaScript异步编程的终极解决方案, 它让异步代码看起来和同步代码一样直观, 用起来更简单: 

async function fetchData() {  try {    const user = await getUserInfo(userId);    const orders = await getOrders(user.id);    const details = await getOrderDetails(orders[0].id);    console.log(details);  } catch (err) {    console.error(err);  }}

这代码看起来完全是同步的风格, 但实际上是异步执行的!4.1 async/await函数的特征总是返回Promise:

1) 如果返回非Promise值, 会自动包装成Promise.resolve(值)

2) 如果抛出异常, 返回Promise.reject(异常)

await只能在async函数中使用:

1) 普通函数中使用会报语法错误

2) 现代浏览器和Node.js的模块系统中支持顶层await

4.2 await解析

4.2.1 await的行为

async function example() {  const result = await somePromise;  console.log(result);}

这段代码实际上做了以下几件事:

1. 暂停example函数的执行

2. 等待somePromise完成

3. 如果Promise成功, 恢复执行并将结果赋值给result

4. 如果Promise失败, 抛出拒绝原因(可以用try/catch捕获)

4.2.2 await不一定要等Promise

虽然设计初衷是处理Promise, 但await可以等待任何值:

async function foo() {  const a = await 42; // 等价于 await Promise.resolve(42)  const b = await someFunction(); // 如果someFunction返回非Promise，也会自动包装}

4.2.3 错误处理机制

await的错误处理非常符合直觉, 可以用传统的try/catch: 

async function fetchData() {  try {    const data = await fetch('/api');    const json = await data.json();    console.log(json);  } catch (err) {    console.error('请求失败:', err);  }}

对比Promise的.catch(), 这种写法更接近同步代码的思维模式. 

五、常见使用方式

5.1 顺序执行: 

async function sequential() {  const user = await getUser();  const posts = await getPosts(user.id);  const comments = await getComments(posts[0].id);  return comments;}

5.2 并行执行: 

async function parallel() {  const [user, posts] = await Promise.all([    getUser(),    getPosts()  ]);  return { user, posts };}

5.3 循环中的await: 

// 顺序处理数组async function processArray(array) {  for (const item of array) {    await processItem(item);  }}
// 并行处理数组async function processArrayParallel(array) {  await Promise.all(array.map(item => processItem(item)));}

5.4 await可以等待任何thenable对象: 

async function example() {  const result = await {    then(resolve) {      setTimeout(() => resolve('done'), 1000);    }  };  console.log(result); // 1秒后输出'done'}

5.5 混合使用Promise和async/await: 

async function getUserPosts(userId) {  return fetchUser(userId)  // 返回Promise    .then(user => fetchPosts(user.id))    .then(posts => {      return asyncFunction(posts); // 在then中调用async函数    });}