简单实现Promise,深入理解ES7的async

我们处理异步的方式,从开始的回调,到Promise,再到现在的async,await,变得越来越方便,直观了。但是知其然要知其所以然,所以我们一步步来分析他们是如何实现的(需要知道Promise的使用方法,await
async的使用方法,以及generator的功能)。

在最开始学习ES6的Promise时,曾写过一篇博文
《promise和co搭配生成器函数方式解决js代码异步流程的比较》
,文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同。

function process() { setTimeout => { console.log("timeout") }, 1000)}

在文章末尾,提到了ES7的async和await,只是当时只是简单的提了一下,并未做深入探讨。

如果我们想要执行上面的函数,并且在计时结束后的回调中执行某些动作,应该怎么办呢?我们可以使用一个回调:

在前两个月发布的Nodejs
V7中,已添加了对async和await的支持,今天就来对这个东东做一下深入的探究。以更加优雅的方法写异步代码。

function process { setTimeout => { console.log("timeout") callback() }, 1000)}process(function doSomething() { console.log("do something")})

async/await是什么

这是我们正常的回调方式,但是这样的方式不够灵活,而且当需要嵌套回调的时候,往往就写成了callback
hell。Promise其实就是对上面的process进行一层包装。下面实现一个最简单的Promise

async/await可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码。

function Promise { const callbacks = []; this.then { callbacks.push } function resolve { callbacks.forEach(callback => callback && callback } fn return this} 

熟悉co模块的同学应该都知道,co模块是TJ大神写的一个使用生成器函数来解决异步流程的模块,可以看做是生成器函数的执行器。而async/await则是对co模块的升级,内置生成器函数的执行器,不再依赖co模块。同时,async返回的是Promise。

从代码可以看到,then函数其实就是把传入的函数放到一个回调数组里,这也让原本单个的回调变成支持许多回调。resolve函数就是传回我们将要执行的函数中的回调,他会调用每一个then里面添加的回调。最后,执行传入的函数,并且返回this

从上面来看,不管是co模块还是async/await,都是将Promise作为最基础的单元,对Promise不很了解的同学可以先深入了解一下Promise。

可以向正常的Promise一样使用:

对比Promise,co,async/await

var p = Promise(function process { setTimeout => { console.log("timeout") resolve() }, 1000)})p.then => console.log("timeout!!"))

下面我们使用一个简单的例子,来对比一下三种方式的异同,以及取舍。

写到这里,也就明白resolve,reject是怎么实现的了。

我们采用mongodb的nodejs驱动,查询mongodb数据库作为例子,原因是mongodb的js驱动已经默认实现了返回Promise,而不用我们单独去包装Promise了。

await 和
async,需要在generator的基础上来实现。generator可以实现控制函数间执行顺序的功能。可能说的有些抽象,但是理解了之后就感觉不难了。

使用Promise链

function* generateValue() { console.log yield "hello" console.log return "world"}var g = generateValue()console.logconsole.log// 输出:// first// { value: 'hello', done: false }// second// { value: 'world', done: true }
MongoClient.connect(url + db_name).then(db=> {
 return db.collection('blogs');
}).then(coll=> {
 return coll.find().toArray();
}).then(blogs=> {
 console.log(blogs.length);
}).catch(err=> {
 console.log(err);
})

这是一个生成器函数,在其他语言也有类似的语法。在JavaScript中需要在函数名称前带上*才能使用yield来使用生成器。

Promise的then()方法可以返回另一个Promise,也可以返回一个同步的值,如果返回的是一个同步值,将会被包装成一个Promise。

generator函数的特点是,每次执行到yield时,执行权交到调用它的地方,等待下一次调用next()之后才会继续执行。

上面的例子中,db.collection()将返回一个同步的值,即集合对象,但是被包装成Promise,将会透传到下一个then()方法。

那么generator与await和async是什么关系呢?

上面一个例子,是使用的Promise链。

同样的,我们先看问题(axios是一个强大的HTTP
client,可以同时用于web和node)

先连接数据库MongoClient.connect()返回一个Promise,然后在then()方法里获得数据库对象db,然后再获取到coll对象再返回。在下一个then()方法获得coll对象,然后进行查询,查询结果返回,逐层调用then()方法,形成一个Promise链。

axios.get("https://www.github.com").then(result => console.log

在这个Promise链上,如果任何一个环节出现异常,都会被最后的catch()捕捉到。

代码中,如果我们想要正常的输出结果,就可以在一个then的调用中来执行log。但是怎么样不使用Promise,而用更加自然的方式实现呢

可以说,这个使用Promise链写的代码,比层层调用回调函数更优雅,流程也更明确。先获得数据库对象,再获得集合对象,最后查询数据。

function* syncDemo() { const result = yield axios.get("https://www.github.com") console.log('after get result', result)}

但是这里有个不怎么“优雅”的问题,在于,每一个then()方法获取的对象,都是上一个then()方法返回的数据。而不能跨层访问。

我们利用yield,在上面的代码中,如果执行syncDemo(),函数执行到yield时会把代码的控制权转到调用函数的地方,于是参考generator的使用方法:

什么意思,就是说在第三个then(blogs =>
{})中我们只能获取到查询的结果blogs,而不能使用上面的db对象和coll对象。这个时候,如果要打印出blogs列表后,要关闭数据库db.close()怎么办?

var g = syncDemo()var p = g.next().valuep.then(result => g.next

这个时候,可以两种解决方法:

在代码中g.next中的result会传回generator中赋给result,然后继续执行。这就到了关键的地方,可以看到,利用generator的这个特性,我们已经实现了一个可以顺序执行的异步函数,但是在调用这个函数的时候,需要控制执行的过程。那么是不是可以写一个函数专门来自动执行这个步骤呢?

第一种是,使用then()嵌套。我们将Promise链打断,使之嵌套,犹如使用回调函数的嵌套一般:

function runGenerator { var g = fn() g.next().value.then(result => { g.next })}
MongoClient.connect(url + db_name).then(db=> {
 let coll = db.collection('blogs');
 coll.find().toArray().then(blogs=> {
  console.log(blogs.length);
  db.close();
 }).catch(err=> {
  console.log(err);
 });
}).catch(err=> {
 console.log(err);
})

上面就是一个非常简单的执行函数。调用:

这里我们将两个Promise嵌套,这样在最后一个查询操作里面,就可以调用外面的db对象了。但是这中方式,并不推荐。原因很简单,我们从一种回调函数地狱走向了另一种Promise回调地狱。

runGenerator 

而且,我们要对每个Promise的异常进行捕捉,因为Promise没有形成链。

syncDemo就自动执行了。

还有一种方式, 是在每个then()方法里都将db传过来:

而JavaScript的async,await做的也是同样的事情。

MongoClient.connect(url + db_name).then(db=> {
 return {db:db,coll:db.collection('blogs')};
}).then(result=> {
 return {db:result.db,blogs:result.coll.find().toArray()};
}).then(result=> {
 return result.blogs.then(blogs=> { //注意这里,result.coll.find().toArray()返回的是一个Promise,因此这里需要再解析一层
  return {db:result.db,blogs:blogs}
 })
}).then(result=> {
 console.log(result.blogs.length);
 result.db.close();
}).catch(err=> {
 console.log(err);
});

我们在每个then()方法的返回中,都将db及其每次的其他结果组成一个对象返回。请注意,如果每次的结果都是一个同步的值还好说,但是如果是一个Promise值,每一个Promise都需要多做一层解析。

例如上面的一个例子,第二个then()方法返回的
{db:result.db,blogs:result.coll.find().toArray()} 对象中, blogs
是一个Promise,在下一个then()方法中,我们无法直接引用博客列表数组值,因此需要先调用then()方法解析一层,然后将两个同步值db和blogs返回。

注意,这里涉及到了Promise的嵌套,不过一个Promise只嵌套一层then()。

这种方式,也是很蛋疼的一个方式,因为如果遇到then()方法中返回的不是同步的值,而是Promise的话,我们需要多做很多工作。而且,每次都透传一个“多余”的db对象,在逻辑上也有点冗余。

但除此之外,对于Promise链的使用,如果遇到上面的问题,好像也没其他更好的方法解决了。我们只能根据场景去选择一种“最优”的方案,如果要使用Promise链的话。

鉴于Promise上面蛋疼的问题,TJ大神将ES6中的生成器函数,用co模块包装了一下,以更优雅的方式来解决上面的问题。

co搭配生成器函数

如果使用co模块搭配生成器函数,那么上面的例子可以改写如下:

const co = require('co');
co(function* (){
 let db = yield MongoClient.connect(url + db_name);
 let coll = db.collection('blogs');
 let blogs = yield coll.find().toArray();
 console.log(blogs.length);
 db.close();
}).catch(err=> {
 console.log(err);
});

co是一个函数,将接受一个生成器函数作为参数,去执行这个生成器函数。生成器函数中使用
yield 关键字来“同步”获取每个异步操作的值。

上面代码在代码形式上,比上面使用Promise链要优雅,我们消灭了回调函数,代码看起来都是同步的。除了使用co和yield有点怪之外。

使用co模块,我们要将所有的操作包装成一个生成器函数,然后使用co()去调用这个生成器函数。看上去也还可以接受,但是ES的进化是不满足于此的,于是async/await被提到了ES7的提案。

async/await

我们先看一下使用async/await改写上面的代码:

(async function(){
 let db = await MongoClient.connect(url + db_name);
 let coll = db.collection('blogs');
 let blogs = await coll.find().toArray();
 console.log(blogs.length);
 db.close();
})().catch(err=> {
 console.log(err);
});

我们对比代码可以看出,async/await和co两种方式代码极为相似。

co换成了async,yield换成了await。同时生成器函数变成了普通函数。

这种方式在语义上更加清晰明了,async表明这个函数是异步的,同时await表示要“等待”异步操作返回值。

async函数返回一个Promise,上面的代码其实是这样:

let getBlogs = async function(){
 let db = await MongoClient.connect(url + db_name);
 let coll = db.collection('blogs');
 let blogs = await coll.find().toArray();
 db.close();
 return blogs;
};

getBlogs().then(result=> {
 console.log(result.length);
}).catch(err=> {
 console.log(err);
})

我们定义getBlogs为一个async函数,最后返回得到的博客列表最终会被包装成一个Promise返回,如上,我们直接调用getBlogs().then()方法可获取async函数返回值。

好了,上面我们简单对比了一下三种解决异步方案,下面我们来深入了解一下async/await。

深入async/await

async返回值

async用于定义一个异步函数,该函数返回一个Promise。

如果async函数返回的是一个同步的值,这个值将被包装成一个理解resolve的Promise,等同于return Promise.resolve(value)

发表评论

电子邮件地址不会被公开。 必填项已用*标注