如果我们必须等待结果继续，异步行为是如何有用的?

Question

请原谅我，如果这个问题听起来很奇怪，但我一直很好奇。让我用一个例子进一步说明。我使用下面的函数来提取当前标签URL在我的chrome扩展。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以获得结果，我正在等待getab异步函数(因为chrome。tab方法是async)在我控制它之前等待结果。

那么async到底是如何帮助我的在这种情况下，它旁边的代码块正在等待执行它发生吗?

还有，如果有更好的方法来做上面的操作，请告诉我:)

谢谢你花时间给我解释这件事。

Answer 1

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

但是，你做错了。

一个基于回调的函数的承诺应该是这样的:

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);
});
});
}

一个更好/更简单的方法是使用webeextensionpolyfill，所以你可以这样写:

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