精华 说说还在stage3的async/await, 还在裸奔着generator or 裸奔着promise的进
发布于 4 年前 作者 magicdawn 7298 次浏览 最后一次编辑是 3 年前 来自 分享

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的差异,还有一点就是

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

case

https://cnodejs.org/topic/56ab1c0526d02fc6626bb383 裸奔着用 generator, 那样使用者必须使用 co, 绑死使用者是很危险的哦. see

其他使用 promise.then.then.then.then … 赶紧向这边迁移吧~

其他

个人观点,不对请指正。谢谢。

13 回复

@magicdawn nodejs只是更直接的奔向共产主义(完全异步),后来发现大跃进、文革(callbackhell)等,于是走上了特色的社会主义

形象不?

居然加精了~谢谢支持~

刚从callback hell走到Promise…

会了Promise, async await自然很容易就能上手了

讲到区别时你提到了

这通常是无关紧要的,但碰到 express.js 这种判断你是不是4个参数 err, req, res, next, 是4个才给你传 err就跪了。

理论上来说express直接使用babel polyfill来使用async await就可以了把? 反而co需要你所提到的中间件来兼容express. 这样理解对吗?

@Kaijun 对的。

  1. 可以直接使用 async/await, 但是在 async function 中 throw 只会导致返回的 Promise reject, 如果不把 err 传到 next, 那么你的请求没有结束,浏览器会一直转。如
app.get('/', async function(req, res, next){
  throw new Error('boom');
});

最好wrap一下,如

app.get('/', function(req, res, next){
  (async function(req, res, next){
    throw new Error('boom');
  })(req, res, next).catch(next);
});

这样又比较麻烦了, 可以使用前面提到的 express-modern 帮你 wrap, 其实就是自动帮你 catch(next)

var modern = require('express-modern');
app.get('/', modern(async function(req, res, next){
  throw new Error('boom');
}));
  1. 而 co.wrap(gen-fn) 得到的是一个形参个数为0的函数,即
function wrap结果(){
  return co.call(this, fn.apply(this, arguments));
}

这样把 wrap结果 当成 async function 扔给express, express 会去取它的 length, 取到的不是4, 就不传err, 即 req, res, next 所以还是使用 express-modern, 将 generator function传给 modern

  • 这样modern中间件就可以知道它的 length了, 可以处理 err了
  • 可以自动 catch(next)

其实 co.wrap 与 babel async-to-generator plugin

  1. co.wrap 是运行时将 generator function 包装为一个 async function, 不好处理形参。(应该也是可以的, 使用 new Function)
  2. babel async-to-generator 是编译时将 generator function 包装为一个 async function。

@Kaijun babel支持的 async/await 也不是 polyfill. 它是编译到 ES6 generator function. 或者再往下使用 regenerator 编译到ES5 normal function.

要保持 length 。。。在运行时貌似做不到,不服来辨 https://github.com/magicdawn/co-wrap/blob/master/index.js#L19-L25

@magicdawn 这个还真是做不到…反正我做不到…repo 删了

之前的 Windjs 也是这么个理

回到顶部