我正在开发 Chrome 扩展程序。我对回调有点困惑。在某些情况下，我需要进行多个异步调用。 例如，我有
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
}
在其中我需要调用 chrome.storage.local.remove 和 chrome.storage.local.set。对消息的响应将基于远程和设置的结果。如果它们失败了，当然会发送不同的响应。
应该如何处理？
【问题讨论】：
return true，这将使您能够稍后调用 sendResponse。
标签： javascript google-chrome-extension
我建议您使用标准 js 工具（webpack/babel）构建您的 chrome 扩展。使用这样的现代语法可以很容易地处理多个回调：
const setStore = (data) => {
return new Promise((resolve) => chrome.storage.local.set(data, resolve));
};
const async handleAsyncMessage = (request, sender, sendResponse) => {
await doSomething();
await setStore({ myKey: 1 });
//or if you dont want them to run sequentially
await Promise.all([
doSomething(),
doAnotherThing(),
]);
};
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
handleAsyncMessage(request, sender, sendResponse);
return true;
});
您可以将 chrome.storage.local.remove 和 chrome.storage.local.set 包装在一个函数中，该函数返回一个在执行其回调时解析的承诺。这将使您的代码比回调地狱更易于阅读。
【讨论】：
true 以保持通道打开，但您的侦听器返回一个 Promise。 Chrome 扩展 API 不理解 Promise。解决方案是使用单独的 async 函数或显式使用 Promise 或加载 Mozilla 的 browser 命名空间 polyfill，这使我们能够像您一样直接使用 async 侦听器。