如何将 AJAX 成功变量存储为 AJAX 之外的变量？

我使用 AJAX 来获取我命名为变量 myPubscore 的数据。现在我尝试将 myPubscore 发送到另一个 js 文件。 myPubscore 在 Ajax 中打印得很好，但是当我在 sendResponse 之前打印时，我收到“事件处理程序中的错误：ReferenceError：myPubscore 未定义”。

如何将 myPubscore 从 AJAX 中取出并放入 sendResponse 中？我阅读了关于这个问题的另一篇 SO 帖子，但受访者提到答案已经贬值。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type == "articleUrl") {
        console.log("background heard articleUrl")
        console.log(request);
        var articleUrl = request;
        $.ajax({
        type: 'POST',
        url: `${url}/buttoncolor`,
        data: articleUrl,
        success: function urlFunction(data) {
        var myPubscore = data;
        console.log("myPubscore in ajax:")
        console.log(myPubscore);
        }
        })
    console.log("myPubscore in sendresponce:")
    console.log(myPubscore);
    sendResponse({score: "myPubscore"});
    }

更新了background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type == "articleUrl") {
        console.log("background heard articleUrl")
        console.log(request);
        var articleUrl = request;
        $.ajax({
        type: 'POST',
        url: `${url}/buttoncolor`,
        data: articleUrl,
        success(data){
            console.log("incoming data");
            console.log(data);
            sendResponse(data);
            console.log("sent data");
            },
        });
        return true;
    }

内容.js

        chrome.runtime.sendMessage({ "type": "articleUrl", "url": url }, function (response) {
            console.log("here's the response for sending the URL");
            console.log(response);
        });

当使用像这样的异步调用时$.ajax or fetch or XMLHttpRequest，它的回调会在未来很晚的时间运行，此时周围的作用域已经运行，因此您需要使用回调内的调用结果，如中所述如何从异步调用返回响应？ https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call

Chrome 中扩展消息传递的重要补充

在 Chrome 中，onMessage API 事件无法识别侦听器返回的 Promise，因此为了能够异步使用 sendResponse，您需要返回true从 onMessage 侦听器并在 ajax 回调中调用 sendResponse：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'articleUrl') {
    $.ajax({
      url: '...........',
      success(data) {
        sendResponse(data);
      },
    });
    return true;
  }
});

or

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'articleUrl') {
    fetch('https://www.example.org').then(r => r.text()).then(sendResponse);
    return true;
  }
});

async关键词注释

请注意，您不能使用以下标记来标记 onMessage 侦听器async返回时的关键字true因为它实际上会返回一个Promise反对该 API，Chrome 扩展 API 不支持该 API。在这种情况下，使用单独的异步函数或异步 IIFE，example https://stackoverflow.com/a/53024910.

附：如果你使用WebExtension 填充 https://github.com/mozilla/webextension-polyfill/您可以从 onMessage 监听器返回一个 Promise 并使用async直接充当监听器。在 Firefox 中，这就是 API 开箱即用的工作方式。