如何在此函数中使用 await 和 async？

Question

我正在开发一个即将完成的 Chrome 扩展程序。目前，当数据被提取完成时，我从我的 fetch 中得到响应，而不是正确的顺序。我想我将不得不使用 await 和 async 但我不确定如何。值得注意的是，我在后台脚本和使用 sendMessage 的内容脚本之间建立了“连接”。

我确实尝试过按照本教程进行操作，如果您以前做过，可能非常容易理解，但我不明白我的价格该怎么做 => {} 教程：https://web.archive.org/web/20201227111539/https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp

内容.js

function getPrices() {
    for (var i = 0; i < 35; i++) {
        chrome.runtime.sendMessage(
            {contentScriptQuery: "queryPrice", itemURL: skins[priceNumber]},
            price => {
                console.log(price);
            });

        priceNumber = priceNumber + 1;
    }
...
}

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      if (request.contentScriptQuery == "queryPrice") {
        var url = "https://pixelboii.wtf/steamvalue.json";
        var skinFullName = request.itemURL;
        fetch(url)
            .then(res => res.json())
            .then(price => {
              sendResponse(price.items_list[skinFullName].price["7_days"].average);
            })
            .catch(err => { throw err });
        return true;  // Will respond asynchronously.
      }
    });

感谢所有回复！

Answer 1

Fetch（和许多其他异步方法）的运行时间不确定。这就是为什么它们是异步的，它们依赖于一些可能需要可变时间的外部资源。

您无法确保响应顺序与调用顺序相同。你可以做的是在sendResponse调用中发送request.itemURL作为第二个参数，然后修改你的回调以使用它，例如

内容.js

...
(price, url) => {
    console.log(`${url}: price: ${price}`);
});
...

Background.js

...
sendResponse(price.items_list[skinFullName].price["7_days"].average, request.itemURL);
...

这将确保您可以跟踪哪些商品的价格。

如果您确实需要它们按特定顺序排列，则需要等到所有回调都被触发。这可以通过使用计数器并在调用sendMessage 之前递增，然后在回调中递减来完成。一些快速而肮脏的代码来做到这一点：

let counter = 0, results = {};
for(let i=0;i<35;i++){
    counter++;
    sendMessage(..., (price, url) => {
        counter--;
        results[url] = price;
        if(counter == 0){
            // finished all calls
            // print results
            console.log(results);
        }
    });
}

要直接回答所提出的问题：您必须为sendMessage 创建一个返回承诺的包装器，然后使用let results = await sendMessageWrapper(...) 之类的东西。正如this eslint rule 所解释的那样，在循环中使用 await 是一种反模式。