javascript - 异步/等待不工作？

Question

我正在尝试编写 Foxfire 网络扩展。我想要一个返回选项卡 URL 的函数。

Firefox tabs browser.tabs.get(id) 返回一个 promise，该 promise 解析为一个包含 URL 成员的选项卡对象。 browser.tabs.query 返回解析为包含选项卡 ID 的选项卡数组的 promise 。

计划将上面的两个调用包装在一个解析为 tab.url 的 promise 中使用 async/await 等待它解析并返回结果。

根据 MDN 文档:

"The await expression causes async function execution to pause until a Promise is fulfilled, that is resolved or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise."

list 文件具有标签权限。

所以我的代码如下:

browser.browserAction.onClicked.addListener(test);

async function test(){
  let res = await GetActiveTabURL();
  //console.log(`test ${res}`);
  return res;
}

async function test2(TabID){
  let res = await GetTabURL(TabID);
  //console.log(`test2 ${res}`);
  return res;
}

function GetActiveTabURL() {
  return new Promise((resolve, reject) => {
    browser.tabs.query({currentWindow: true, active: true})
      .then((tabs) => {
        browser.tabs.get(tabs.pop().id)
          .then((tab) => {
            //console.dir(tab);
            resolve(tab.url)
          })
      })
  })
}


function GetTabURL(TabID) {
  return new Promise((resolve, reject) => {
    browser.tabs.get(TabID)
      .then((tab) => {
        //console.dir(tab);
        resolve(tab.url)
      })
  })
}

如图所示，console.dir 和 console.log 语句被注释掉了。我调试代码并使用命令行来执行测试功能。我(而且我显然是错误的)认为测试函数中的 await 应该等到 promise 解决，然后让我返回值。

好的，如果我取消注释 console.log 和 console.dir 语句，从命令行运行测试会给出预期的 (url) 结果。在控制台中，我看到了 log/dir 语句的结果，当从命令行运行时，最终结果是选项卡的 URL(您可以从 console.dir 中获取 tab.id for test2)。

如果我注释掉 console.dir 语句，我会在日志中看到一行“Promise { : "pending"}”，紧接着是新行中的所需结果(url)。

如果我随后也注释掉 console.log 语句，我只会得到“Promise { : “pending” }”行。我从来没有得到所需的 URL。

如果有人想尝试这个， list 文件如下:

{

  "manifest_version": 2,
  "name": "TestGetURL",
  "description": "Functions returning the url",
  "version": "1.0",
  "icons": {
    "48": "icons/link-48.png"
  },

  "permissions": [
    "tabs",
    "contextMenus",
    "nativeMessaging",
    "<all_urls>",
    "webRequest",
    "downloads",
    "clipboardWrite",
    "webNavigation",
    "notifications",
    "storage",
    "cookies",
    "alarms"
  ],

  "background": {
    "scripts": ["background-script.js"]
  },


  "browser_action": {
    "browser_style":false,
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  },


  "default_locale": "en"
}

Answer 1

在文档中发现异步函数必须返回一个 promise 。任何返回声明。不包含 promise 的 return 语句的值将被忽略，如上所示。显然返回了函数中的最后一个 promise 。

因此，据我所知，您不能编写等待 promise 返回该 promise 的值的函数。

来自 let xx = await promise, xx 的值在 await 语句之后的同一函数中可用，并且可以在那里使用。因此，不是调用函数异步返回值，而是必须使调用函数异步并根据需要使用一系列等待来获取所需的值，然后在函数中使用它。