承诺内部未分配变量

Question

也许我有点困，但在什么情况下以下情况会发生？

let foo;

page
  .evaluate(() => {
    // return works... but not closure assignment

    // doesn't work
    foo = 'foo';

    // works
    return 'bar';
  })
  .then(bar => {
    console.log('foobar', foo, bar);
    // > foobar undefined bar
  });

这是在使用Puppeteer的mocha测试中发生的。

更新：精确的完整代码如下：

Node 9.11.2

/* global describe, it, before, after */

const fs = require('fs-extra');
const path = require('path');
const assert = require('assert');
const puppeteer = require('puppeteer');
const sleep = require('shleep');

const extPath = path.resolve(__dirname, '..', 'build');
const { name } = fs.readJSONSync(path.resolve(extPath, 'manifest.json'));

// Access chrome object in Extensions
// https://github.com/GoogleChrome/puppeteer/issues/2878

describe('chrome extension', () => {
  let browser;
  let extensionPage;

  before(async function() {
    this.timeout(90 * 1000);

    // start puppeteer
    browser = await puppeteer.launch({
      headless: false,
      args: [
        `--disable-extensions-except=${extPath}`,
        `--load-extension=${extPath}`
      ]
    });

    // poll instead of hope this is enough time?
    const EXT_LOAD_DELAY = 100;
    await sleep(EXT_LOAD_DELAY);

    const targets = await browser.targets();

    const extensionTarget = targets.find(
      ({ _targetInfo }) =>
        _targetInfo.type === 'background_page' && _targetInfo.title === name
    );

    const page = await extensionTarget.page();

    let foo;

    page
      .evaluate(() => {
        // return works... but not closure assignment

        // doesn't work
        foo = 'foo';

        // doesn't log
        console.log('foo', foo);

        // works
        return 'bar';
      })
      .then(bar => {
        console.log('foobar', foo, bar);
        // > foobar undefined bar
      });
  });

  it('should load', async () => {
    assert(true);
  });
});

测试截图

- azium

---

由于您没有使用async函数，因此[tag:async-await]标签不相关。 - T.J. Crowder

page.evaluate会在不同的上下文中运行代码吗？就像在一个完全不同的浏览器中，具有完全不同的变量一样？ - melpomene

@melpomene - 这似乎很可能。请注意，控制台屏幕截图中没有来自 console.log('foo', foo); 的输出。 - jfriend00

可以在函数上调用.toSource()方法，将返回的字符串发送到浏览器，然后使用eval函数执行它。 - melpomene

是的，这正是它所做的：https://github.com/GoogleChrome/puppeteer/blob/master/lib/ExecutionContext.js#L88-L89。 - melpomene

Answer 1

puppeteer中的evaluate方法不包含您在代码中声明的本地或全局变量的概念。传递给evaluate方法的函数是在页面上下文（即在您的浏览器中）执行的函数。由于foo未在页面上下文中声明，因此无法访问它，因此无法更新其值。

因此，要按步骤执行您的代码：

let foo;

await page.evaluate(() => {
  foo = 'foo';  // Since no variable foo is known to the evaluate method in the context of your page
                // this line , effectively, assigns a new variable called foo with a value 'foo' which
                // is then lost once the method has completed since its value is never returned.

  return 'bar'; // This value is returned from the method and is therefore retained below
})
.then(bar => {
  console.log('foobar', foo, bar);
  // foobar is output as expected since you've hardcoded it

  // foo is now referring to the global foo you declared earlier but since you have used `let` and not
  // assigned it any value, it is output as 'undefined'

  // bar is the value you returned from your 'evaluate' function and is therefore output as 'bar' as
  // expected in the console log.
});

如果你想使用evaluate来更新变量foo，你需要这样做：

let foo;
foo = await page.evaluate(() => {
  return 'foo'
});
console.log(foo); // Now outputs 'foo' as expected

然而，您可以将变量注入 evaluate 方法并更新它们的值（如果需要），例如：

let foo = 'foo'
console.log(foo); // Outputs 'foo' as expected
foo = await page.evaluate((injectedFoo) => {
  return `new${injectedFoo}`;
}, foo);
console.log(foo); // Outputs 'newfoo'

所以这里发生的是你通过在方法声明结束时作为参数传递变量foo将其注入到evaluate方法中。现在，evaluate方法包含一个变量（我称其为injectedFoo以获得更清晰的了解），它携带foo变量的原始值。

然后我返回附加到foo变量字符串开头的字符串new并将其输出到控制台的最终值。

希望这有助于解释evaluate方法的工作方式！

- AJC24