8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

sendResponse 不等待异步函数或 Promise 的解析

Jonas Byström 1月前

14 0

我遇到了异步问题(我相信)。contentscript.js 中的 sendResponse() 不会等待 getThumbnails() 返回。我正在 popup.js 中发送一条消息:chrome.tabs.sendMessage(tab...

我遇到了异步问题(我相信)。 sendResponse() contentscript.js 不会等待 getThumbnails() 返回。

消息发送一条 popup.js

chrome.tabs.sendMessage(tabs[0].id, {message: "get_thumbnails", tabUrl: tabs[0].url},
      function (respThumbnails) {
            const thumbUrl = respThumbnails.payload;
            console.log("payload", thumbUrl)   
      }
);

然后,在 contentscript.js 监听 以下消息:

chrome.runtime.onMessage.addListener(async function(request,sender,sendResponse) {
    if(request.message === "get_thumbnails") {
        const payload = await getThumbnails();
        console.log("thumbPayload after function:", payload)
        sendResponse({payload:payload});   
    }
});


async function getThumbnails() {
    let tUrl = null;
    var potentialLocations = [
        {sel: "meta[property='og:image:secure_url']",   attr: "content" },
        {sel: "meta[property='og:image']",              attr: "content" },
    ];

    for(s of potentialLocations) {
        if(tUrl) return
        const el = document.querySelector(s.sel);
        if(el) {
            tUrl = el.getAttribute(s.attr) || null;
        } 
    }
    return tUrl;
};

但问题也可能出在我的 getThumnails() 函数上,因为大多数情况下, payload 为 null 而不是 undefined。所以 getThumbnails() 可能会在完全执行之前返回。如果是这样的话,我不知道为什么……

我也尝试过这个代码 getThubnails()

async function getThumbnails() {
  let x = await function() {
    let tUrl = null;
    var potentialLocations = [
        {sel: "meta[property='og:image:secure_url']",   attr: "content" },
        {sel: "meta[property='og:image']",              attr: "content" },
    ];

    for(s of potentialLocations) {
        if(tUrl) return
        const el = document.querySelector(s.sel);
        if(el) {
            tUrl = el.getAttribute(s.attr) || null;
        } 
    }
    return tUrl;
  }
  return x;
};

但这不起作用,它似乎破坏了我的代码......

帖子版权声明 1、本帖标题:sendResponse 不等待异步函数或 Promise 的解析
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Jonas Byström在本站《google-chrome》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 顺便说一句,document.querySelector 不会返回 Promise,因此等待它是没有意义的。

  • Chrome 在 ManifestV3 和 V2 中仍然不支持在 onMessage 监听器的返回值中使用 Promise 中的星号 https://crbug.com/1185241 可收到进度通知。

    由于您的侦听器是使用 async 关键字声明的,它返回一个 Promise 要求的 true 文字,因此返回的带有您的值的 Promise 将被忽略,端口将立即关闭,并且调用者将收到 undefined 响应。

    使你的监听器兼容

    1. p2

    2. p3

      chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {  if (msg.message === "get_thumbnails") {    processMessage(msg).then(sendResponse);    return true; // keep the messaging channel open for sendResponse  }});async function processMessage(msg) {  console.log('Processing message', msg);  // .................  return 'foo';}

    修补 API 以允许异步/Promise 侦听器

    在每个使用 chrome.runtime.onMessage 的脚本开头添加以下内容

    if ('crbug.com/1185241') { // replace with a check for Chrome version that fixes the bug
      const {onMessage} = chrome.runtime, {addListener} = onMessage; 
      onMessage.addListener = fn => addListener.call(onMessage, (msg, sender, respond) => {
        const res = fn(msg, sender, respond);
        if (res instanceof Promise) return !!res.then(respond, console.error);
        if (res !== undefined) respond(res);
      });
    }
    

    ...然后你可以简单地得到 return 值:

    chrome.runtime.onMessage.addListener(async msg => {
      if (msg === 'foo') {
        const res = await fetch('https://foo/bar');
        const payload = await res.text();
        return {payload};
      }
    });
    
  • 谢谢你的回答。但是,我尝试了你的代码,它仍然不起作用。它返回 null。我的 getThumbnails() 函数一切正常吗?除了我删除的 await document.querySelector :)

  • 直到我删除了顶级 addListener 函数中的 async 关键字后,这才起作用。chrome.runtime.onMessage.addListener(async function ( >>> chrome.runtime.onMessage.addListener(function (

  • @Vadorequest,您所做的正是此答案所显示的。我添加了一条明确的注释来澄清这一点。

  • 你救了我!对于未来的读者,请删除 ASYNC!!!使用 thens、sendReponse 和 return true,它将解决你所有的问题!

  • @Arst,issuetracker.google.com/issues/314359857

返回
作者最近主题: