JS 回调函数, Promise和Async/Await异步编程方法对比

上期讲到了JS中的异步原理，这期来介绍下回调函数，Promise，和Async/Await三种常见的异步编程方法，以及它们的优缺点。

一、回调函数

回调函数A作为一个参数被传递到函数B中，在函数B中引用并执行函数A。通常函数B为异步操作，等函数B完成耗时任务后再执行回调函数A。

function HelloWorld(count, callback) {
     	//函数B
  console.log(`Hello World ${
       count} time!`);
  setTimeout(() => {
     
  	callback();
  }, 3000);
}
function FinishHelloWorld() {
     	//函数A
	console.log("Goodbye World!");
}
HelloWorld(1, FinishHelloWorld);	//输出：Hello World 1 time! 三秒后 Goodbye World!

优点：异步编程最基本的方法，容易理解，方便部署
缺点：各函数耦合度高，代码阅读质量堪忧，会形成回调地狱（如下）

HelloWorld("1", function () {
     
  HelloWorld("2", function () {
     
    HelloWorld("3", function () {
     
    	HelloWorld("4", function () {
     
      		FinishHelloWorld();
      	});
    });
  });
});

为了解决回调地狱的发生，更有条理的Promise方法在ES6中出现了。

二、Promise

每个Promise对象代表一个异步操作，有Pending（进行中），Resolved（已完成）和Rejected（已失败）三种状态。只有Promise监听到Resolved或者Rejected的结果，才会调用then回调函数。因为Promise的意思是“承诺”，可以理解为一定要拿到承诺的结果才会进行下一步，被称为链式调用。

let HelloWorld = new Promise((resolve, reject) => {
     
	setTimeout(() => {
     
		resolve('Hello World!');  //切换到完成状态 传值并执行then
	}, 3000);
});
HelloWorld.then((resolvedVal) => {
     
	console.log(resolvedVal);  //三秒后 输出Hello World
});

优点：

1. 提供统一的对象接口，操作容易，很多请求库（如axios）都在使用
2. 将异步操作以同步的流程表达出来，避免了层层嵌套的回调地狱

缺点：对象一旦建立就会立即执行异步任务，无法中途取消

三、Async/Await

Async/Await是基于Promise实现的更简洁的实现异步方法。Async用于声明一个方法包含异步操作；Await等待一个Promise对象的返回值，再执行下面行的代码。

async function AsyncHelloWorld() {
     
	let resolvedVal = await HelloWorld();  //上面的Promise对象
	console.log(resolvedVal);
}
AsyncHelloWorld();	//三秒后 输出Hello World

优点：

1. 使异步操作完全类似于同步代码，优雅地避免了Promise中多个then链接的嵌套。
2. 利用Try/Catch可以同时处理同步和异步错误，有利于debug。
   
   
   ↓喜欢文章的话，就给作者点个赞加关注吧~