如果我们必须等待结果才能继续，那么异步行为有何用处？

Question

如果这个问题听起来很奇怪，请原谅我，但我对此很好奇。让我用一个例子进一步说明。我正在使用下面的函数在我的 chrome 扩展中提取当前选项卡 URL。 chrome 提供的方法是异步的，我使用回调来提取值，等待过程完成然后使用它 ...

function addCurrentURL() {
  let url;
  function urlCallback(result) {
    url = result
  }

  await getTab(urlCallback);

  async function getTab(callback) {
    chrome.tabs.query(
      { active: true, lastFocusedWindow: true },
      function (tabs) {
        callback(tabs[0].url);
      }
    );
  }

  console.log(url)
}

如您所见，我正在传递函数 urlCallback 来获取结果，我正在等待 getTab 异步函数（因为 chrome.tabs 方法是async) 在我安慰它之前等待结果。

所以 在这种情况下，async 究竟如何帮助我，因为它旁边的代码块正在等待执行以使其发生？

此外，如果有更好的方法进行上述操作，请告诉我:)

感谢您花时间向我解释这一点。

Answer 1

将 await 与异步 API 一起使用的优点是您在该执行链之外的其他代码不会被阻塞，并且页面的 DOM 也不会被阻塞API 运行时被阻塞。

但是，你做错了。

以下是基于回调的函数的正确承诺：

async function addCurrentURL() {
  const url = await getActiveTabUrl();
  console.log(url);
}

function getActiveTabUrl() {
  return new Promise(resolve => {
    chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
      resolve(tabs[0].url);
    });
  });
}

甚至 better/simpler 方法是使用 WebExtension polyfill 所以你可以这样写：

async function getActiveTabUrl() {
  const tabs = await browser.tabs.query({ active: true, lastFocusedWindow: true });
  return tabs[0].url;
}

如果我们必须等待结果才能继续，那么异步行为有何用处？

How is async behavior useful if we have to await for the result to proceed?

asynchronous

callback

google-chrome-extension