Node.js & co - 避免混合承诺和事件回调答案

【问题标题】：Node.js & co - avoid mixing promises and event callbacksNode.js & co - 避免混合承诺和事件回调
【发布时间】：2017-12-19 02:45:06
【问题描述】：

最近，我一直在试验phantomjs-node 库。我想要实现的基本上是创建一个动态网页模板，使用phantomjs-node 库来“运行”它，最后从渲染的页面中提取一些数据。

在最简单的设置中，第一次尝试是这样的（在下面的示例中，模板只是静态的，但原则上它可能包含一些利用外部库的进一步逻辑等）：

var phantom = require('phantom');
var co = require('co');
var sleep = require('system-sleep');
var winston = require('winston');

const logger = new winston.Logger({
    level: 'debug',
    transports: [new winston.transports.Console({
        json: false, timestamp: () => (new Date()).toLocaleString()
    })]
});

co(function*() {
    logger.info('start');
    var instance = yield phantom.create();   
    try {
        const html = `
                <!DOCTYPE html>
                <html>
                    <head>
                        <title>Page title</title>
                    </head>
                    <body>
                        <div id='results'>Page data</div>
                    </body>
                </html>
            `;

        var page = yield instance.createPage();    

        yield page.on('onLoadFinished', function(){
            logger.info('onLoadFinished');

            page.evaluate(function(){
                return document.getElementById('results').textContent;    
            }).then(function(val){
                logger.info(`RESULT = ${val}`);    
            }).catch(function(val){
                logger.error(val.message);    
            });
        });

        yield page.setContent(html, 'http://localhost');

    }catch (e){
        logger.error(e.message);       
    }finally{
        instance.exit();
    }
    logger.info('done');
});

但是，输出失败：

12/18/2017, 2:44:32 PM - info: start
12/18/2017, 2:44:33 PM - info: done
12/18/2017, 2:44:33 PM - info: onLoadFinished
12/18/2017, 2:44:33 PM - error: Phantom process stopped with exit code 0

很可能是因为当page.evaluate 返回的promise 的then-callback 最终被调用时，主幻象进程已经退出。

为了“解决”这个问题，我采用了以下即兴策略（省略下面示例的其余部分）：

    var page = yield instance.createPage();

    var resolver;
    var P = new Promise(function(resolve, reject){ resolver = resolve; });

    yield page.on('onLoadFinished', function(){
        logger.info('onLoadFinished');

        resolver(page.evaluate(function(){
            return document.getElementById('results').textContent;
        }));
    });

    yield page.setContent(html, 'http://localhost');

    const val = yield P;
    logger.info(`RESULT = ${val}`);

这实质上创建了一个新的 Promise，该 Promise 由 page.evaluate 返回的 Promise “外部”解决。 co 块末尾的 yield P 语句然后阻塞，直到所需的结果准备好，因此输出符合预期：

12/18/2017, 2:53:47 PM - info: start
12/18/2017, 2:53:48 PM - info: onLoadFinished
12/18/2017, 2:53:48 PM - info: RESULT = .....
12/18/2017, 2:53:48 PM - info: done

虽然这似乎可行，但感觉很“hacky”（例如，在调用 resolver 之前在回调中抛出的异常不会在主 try/catch 块中检测到），所以我想知道会发生什么为了将控制从onLoadFinished 回调“转移”回co 管理的领域，是一种更清洁的方法吗？

【问题讨论】：

标签： javascript node.js callback promise phantomjs-node

【解决方案1】：

不要再使用co + 生成器函数。 async/await 在这里。
是的，您应该将所有（最多）触发一次的事件回调转换为 Promise。
不，永远不要创建这样的承诺并“在外部解决它们”。只需将解决它们的东西放在 Promise 构造函数中即可。

(async function() {
    logger.info('start');
    var instance = await phantom.create();   
    try {
        const html = `…`;
        const page = await instance.createPage();    

        await new Promise((resolve, reject) => {
            page.on('loadFinished', resolve);
            page.on('resourceError', reject); // or something like that?
            page.setContent(html, 'http://localhost'); // this doesn't appear to return a promise
        })
        logger.info('onLoadFinished');

        try { // this extra inner try looks superfluous
            const val = await page.evaluate(function(){
                return document.getElementById('results').textContent;    
            });
            logger.info(`RESULT = ${val}`);
        } catch(e) {
            logger.error(e.message);    
        }
    } catch(e) {
        logger.error(e.message);       
    } finally {
        instance.exit();
    }
    logger.info('done');
}());

【讨论】：

感谢您提供详细的cmets！是否有必要在Promise 构造函数中嵌套另一个async 函数？据我了解，page.on 调用是异步的（或原则上返回另一个承诺），所以如果确实如此，原则上可能会发生page.setContent 在设置loadFinished 回调之前执行并完成？跨度>
@ewcz No. Never pass an async function to the new Promise constructor! page.on 似乎没有返回承诺，这就是我们包装它的原因（以承诺它）。另外回调是异步的，也就是说it always executes after setContent call（也因为是它造成的，所以之前不可能发生）。
我知道回调本身是通过设置的内容启动的，我的意思是通过page.on分配/注册回调的操作-据我了解source基本上是调用确实返回承诺的execute 函数（如果我将page.on 的返回值打印到控制台，我会得到Promise { <pending> }）
所以我担心page.on('loadFinished', resolve); 确实注册了回调（一旦调用它就解决了承诺）但是这种注册可能会在设置内容之后发生。不幸的是，似乎确实如此，如果我运行您的代码，它只会打印start 消息，并且承诺似乎永远不会得到解决......
或者换句话说，page.on 构造了一个仅承诺注册回调的承诺（在某些时候） - 这就是为什么我使用 yield page.on 以便等到回调设置如此之后可以安全地设置内容...