说说还在stage3的async/await

最新推荐文章于 2023-06-06 14:26:14 发布

offbye

最新推荐文章于 2023-06-06 14:26:14 发布

阅读量1.5k

点赞数

前端开发专栏收录该内容

74 篇文章 0 订阅

订阅专栏

这篇文章介绍了ES7中 async/await，generator，co，bluebird等异步编程的关联和发展变化，值得参考。
原文 https://cnodejs.org/topic/5709cb2f94b38dcb3c09a7ac

async/await

提议 https://tc39.github.io/ecmascript-asyncawait/目前在 stage3, 没赶在 ES2016即ES7的deadline之前达到stage4, 所以只能赶下波 ES2017 了。已经用上babel的可以不用往下看了~不是你们的菜~

async function foo(){
  let b = await bar();
  return b + 1;
}

调用 bar() 的返回值是一个 Promise 实例
foo函数中可以去等待bar的执行，类似线程join
调用 foo() 的返回值是一个 Promise 实例，可以被其他 async function await

但是只要满足一点就可以了，返回值是 Promise类型，即可称之为 aysnc function. 例如

function bar(){
  return Promise.resolve(1);
}

// or
async function bar(){
  return 1;
}

这两种形式对于使用者 foo() 来说没有任何不同。

desugaring

see https://tc39.github.io/ecmascript-asyncawait/#desugaring在async/await 语法糖之下是什么呢

async function <name>?<argumentlist><body>
=>
function <name>?<argumentlist>{ return spawn(function*() <body>, this); }

是有一个 spawn 函数来帮你运行一个 generator, 并返回一个 spawn 的返回值。proposal里给出了 spawn 的实现

function spawn(genF, self) {
    return new Promise(function(resolve, reject) {
        var gen = genF.call(self);
        function step(nextF) {
            var next;
            try {
                next = nextF();
            } catch(e) {
                // finished with failure, reject the promise
                reject(e);
                return;
            }
            if(next.done) {
                // finished with success, resolve the promise
                resolve(next.value);
                return;
            }
            // not finished, chain off the yielded promise and `step` again
            Promise.resolve(next.value).then(function(v) {
                step(function() { return gen.next(v); });
            }, function(e) {
                step(function() { return gen.throw(e); });
            });
        }
        step(function() { return gen.next(undefined); });
    });
}

可以去看 co 的源码，跟 co 差不多，co要多一些将其他非promise值转为promise的过程。所以可以这样使用

function foo(){
  return co(function*(){
    let b = yield bar();
	return b + 1;
  });
}

这个 foo 跟前面的 async function foo() { ... } 对于使用者来说没有任何区别, (foo.length 除外, 待会说).于是可以使用一个方法去生成这样一个用 generator 写的 aysnc function

// 使用 co.wrap
let foo = co.wrap(function*(){
  let b = yield bar();
  return b + 1;
});

// 使用 bluebird.coroutine
let foo = bluebird.coroutine(function*(){
  let b = yield bar();
  return b + 1;
});

所以推荐使用 co.wrap & bluebird.coroutine或者其他工具将你的函数封装成一个可以返回 Promise 的广义async function。并不需要等到 aysnc/await 变成 native. 将来迁移到async/await 只需要修改这个定义的地方即可(如bar), 调用者(如foo)并不需要知晓你的改变。

差异

async funtion foo1(n){
  let b = await bar();
  return b + n;
}

let foo2 = co.wrap(function*(n){
  let b = yield bar();
  return b + n;
});

这两种形式，抛开一个是 function declaration, 一个是 variable declaration的差异，还有一点就是

foo1.length // 1
foo2.length // 0

就是wrap的时候丢掉了形参个数信息, 而且 fn.length 是不可写的
这通常是无关紧要的，但碰到 express.js 这种判断你是不是4个参数 err, req, res, next, 是4个才给你传 err就跪了。
- see http://expressjs.com/en/guide/error-handling.html
- see https://github.com/magicdawn/express-modern