Javascript 如何在此函数中使用wait和async?

Javascript 如何在此函数中使用wait和async?,javascript,function,google-chrome-extension,fetch,Javascript,Function,Google Chrome Extension,Fetch,我正在开发一个几乎完成的Chrome扩展。目前,当数据提取完成时,我从我的提取中得到响应,而不是按照正确的顺序。我想我将不得不使用wait和async,但我不确定如何使用。值得注意的是,我使用sendMessage在后台脚本和内容脚本之间建立了“连接” 我确实尝试过遵循本教程,如果您以前做过的话,可能非常容易遵循,但我不明白如何处理我的price=>{} 教程: Content.js function getPrices() { for (var i = 0; i < 35; i+

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

我确实尝试过遵循本教程,如果您以前做过的话,可能非常容易遵循,但我不明白如何处理我的price=>{} 教程:

Content.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;
    }
...
}
感谢所有回复

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

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

Content.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;
    }
...
}
。。。
(价格、网址)=>{
log(`${url}:price:${price}`);
});
...
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.
      }
    });
。。。
sendResponse(price.items\u list[skinFullName].price[“7天”]。average,request.itemURL);
...
这将确保您可以跟踪哪些商品的价格

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

let counter=0,results={};
for(设i=0;i{
计数器--;
结果[url]=价格;
如果(计数器==0){
//完成所有通话
//打印结果
控制台日志(结果);
}
});
}

要直接回答问题:您必须为
sendMessage
创建一个返回承诺的包装,然后使用类似
let results=wait sendMessageWrapper(…)
的方法。正如所解释的,在循环中使用wait是一种反模式。

您显示的代码建议您发送一次消息。。。那么,响应的顺序怎么可能是错误的呢?如果你在某种循环中调用sendMassage-展示你是如何做的-因为第一个代码不会从async/Wait中受益,因为该代码中没有承诺哦,绝对,更新了帖子!你能解释一下正确的顺序是什么意思吗?正确的顺序:取回的第一件物品也应该是退回的第一件物品,第二件物品应该是退回的第二件物品等等。我觉得这可能是最好的方式,但是我更喜欢priceNumber,而不是itemURL,因为这是我稍后用来识别它们的。但是,当我使用您的代码时,它只返回undefined:price:undefined如果您想使用priceNumber,您必须将其传递到后台页面,然后再返回,或者您可以在循环中创建一个闭包,以捕获调用
sendMessage
函数时的值。你应该仔细阅读闭包和在循环中使用回调来完全理解这里发生的事情。我的观点是,即使我只是尝试了你的代码(没有priceNumber),它也不起作用。我真的很感激你解释了一切!