JavaScript异步代码优化：5种方案对比与Async/Await实战

JavaScript异步编程概述

前言

在JavaScript开发实践中，异步执行场景无处不在，例如Ajax数据请求或定时器任务。这类场景下常伴随难以排查的Bug或结构混乱的代码片段，因此掌握异步代码的管理与优化是提升开发效率的关键。下文将从常见问题入手，逐步构建完善的异步编程思路。

常见异步问题：回调地狱与异常处理

异步问题

1. 回调地狱

异步编程中最典型的问题之一是“回调地狱”（Callback Hell）。其根源在于异步操作执行时间的不确定性以及代码逻辑间的强依赖关系。以下代码展示了这一现象：


// 一个动画结束后，执行下一个动画，下一个动画结束后再执行下一个动画
$('#box').animate({width: '100px'}, 1000, function(){
  $('#box').animate({height: '100px'}, 1000, function(){
    $('#box').animate({left: 100}, 1000);
  });
});

由于无法预知第一个动画何时启动或结束，开发者往往将第二个动画的逻辑嵌套在第一个动画的完成回调中，同理第三个动画又嵌套在第二个中。当此类链式依赖增多时，代码层级急剧加深，形成难以维护的回调地狱。

2. 捕获异常

除了结构混乱，在异步代码中捕获错误也颇具挑战，通常需要手动构建复杂的错误处理机制：


try {
  throw new Error('fail');
} catch (e) {
  console.log(e);
}

这种写法不仅增加了维护成本，也偏离了JavaScript良好的编码规范，使得代码可读性大幅降低。

异步代码优化方案详解

解决方案

如何优雅地编写异步代码？本文总结了五种常见的解决方案：

方案一：回调函数（Callback）

1. 回调函数（Callback）

callback即回调，并非将回调内容置于异步方法内，而是置于外部回调函数中，例如问题1的代码经callback改造后如下：


$('#box').animate({width: '100px'}, 1000, autoHeight);

function autoHeight() {
  $('#box').animate({height: '100px'}, 1000, autoLeft);
}

function autoLeft() {
  $('#box').animate({left: 100}, 1000);
}

这种写法将异步逻辑转化为类似同步的线性结构，有效避免了层层嵌套，提升了代码流畅度。作为异步编程最基础且核心的思路，Callback至今仍在广泛使用。

方案二：Promise对象

2. Promise

在Callback基础上，Promise已成为广泛应用的异步解决方案，相比传统回调函数更为合理且功能强大。熟悉ES6的开发者对此应不陌生。

假设我们需要异步加载一张图片，并在加载成功后执行特定操作。若不想使用回调函数或将逻辑硬编码在成功事件中，可借助Promise实现：


let p = new Promise((resolve, reject) => {
  let img = new Image(); // 创建图片对象

  // 图片加载成功事件
  img.onload = function() {
    resolve(img); // 输出图片对象
  };

  // 图片加载失败事件
  img.onerror = function() {
    reject(new Error('load error')); // 输出错误
  };

  img.src = 'xxx'; // 图片路径
});

// Promise then回调
p
.then(result => {
  $('#box').append(result); // 成功后我们把图片放到页面上
})
.catch(error => {
  console.log(error); // 打印错误
})

通过Promise，我们将图片加载逻辑与成功/失败后的处理逻辑解耦，将嵌套回调转化为链式调用。同时，利用catch方法捕获异常变得直观便捷。

若需等待多个异步请求全部完成后执行操作，可使用Promise.all方法，示例如下：


let p = Promise.all([p1, p2, p3]); // 其中p1、p2、p3都是Promise实例

p.then(result => console.log(result));

尽管Promise优势明显，但也存在局限：后续then回调仅能获取上一层返回的数据，无法跨层访问；此外，过多的链式调用仍可能降低代码可维护性。

方案三：Generator函数

3. Generator函数

与Promise类似，Generator函数也是ES6提供的异步编程方案，它返回一个遍历器对象。在异步任务需暂停的位置，可使用yield语句，例如：


function* getData() {
  let result = yield fetch("xxx"); // 调用ajax，yield命令后面只能是 Thunk 函数或 Promise 对象

  console.log(result);
}

// 执行
let g = getData();
let result = g.next(); // { value: [object Promise], done: false }

result.value.then(data => {
  return data.json();
}).then(data => {
  g.next(data);
});

Generator在遇到yield时暂停执行，需手动调用next()方法继续。next返回值的value属性即为所需数据（此处为fetch返回的Promise对象），因此需结合then回调，最后调用g.next(data)结束并输出结果。

Generator的主要缺点在于每次执行yield后需手动调用next，操作繁琐且易出错。

方案四：co库自动执行

4. co库

为解决Generator需手动执行next的问题，TJ Holowaychuk开发了co库，实现了Generator的自动执行。原手动执行代码可简化为：


let files = function* (){
  var f1 = yield readFile('/xxx/xxx'); // 读取file1文件
  var f2 = yield readFile('/xxx/xxx'); // 读取file2文件

  console.log(f1.toString());
  console.log(f2.toString());
};

files.next(); // 执行yield
files.next(); // 执行yield

使用co库后：


var co = require('co');

co(files);

co函数返回一个Promise对象，因此可链式调用then方法添加回调。


co(files).then(() => {
 console.log('执行完成');
});

最终结果显示，无需手动执行next，文件内容即可正常打印输出。

虽然co库有效解决了Generator的执行器问题，但引入额外模块增加了依赖负担。是否存在更简便的方案？下文将介绍。

方案五：Async与Await语法糖

5. Async与Await

除上述四种方案外，ES7引入了更便捷的async函数和await命令，值得深入探讨。

本质上，async是Generator函数的语法糖，区别在于async内置了执行器，即自带自动运行能力。示例如下：


let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2); 
  }, 1000);
});

async function waitFn() {
  let a = await p1; // await命令后面可以是 Promise 对象和原始类型的值，如果使原始类型最终也会返回为Promise对象
  let b = await p2;

  return a + b
}

// async函数的返回值是 Promise 对象， 可以用then方法指定下一步的操作
waitFn().then(result => {
  console.log(result); // 2s后输出3
});

async函数内部return语句的值将作为then回调的参数。这与使用co包裹的Generator函数效果相似，仅将*替换为async，yield替换为await。

可以说，Async与Await是ES7最重要的特性之一。尽管存在一定局限性，但处理异步代码时仍比其他方式更为得心应手。

总结与建议

结语

本文简要介绍了JavaScript异步代码的五种常见处理方式。每种方案均有其适用场景与必要性，有兴趣的开发者可进一步拓展研究。只有充分理解并掌握各方案优缺点，方能真正享受异步编程带来的便利。

以上内容由本站整理发布，旨在帮助开发者解决JavaScript异步代码优化问题。如有疑问欢迎留言，我们将及时回复。感谢对本站的支持！

JavaScript异步编程演进：从回调到Async/Await详解