Javascript 如何在Chrome扩展中的API请求后对DOM进行更改？

我正在尝试制作一个Chrome扩展，它将获取网页的标题，将其发送到一个语言处理API，该API返回一个情绪分数，然后根据分数的权重以不同的颜色突出显示页面上的标题。除了突出显示功能外，我的一切都正常工作

我的猜测是，因为XMLHTTPRequests是异步运行的，所以它们只在DOM完成加载后返回信息，此时更改CSS和更改element.style.backgroundColor已经太晚了。当我删除API调用并让它检查textContent是否与特定单词或短语匹配时，突出显示效果良好

在收到数据并解决承诺后，是否需要重新呈现页面？我查看了chrome信息，但这似乎不是解决方案。感谢您提供的任何建议

下面是脚本。我已从HTTP请求中删除了标头：

function highlightSentiment(){
 var elements = document.getElementsByTagName('a');

 for (var i = 0; i < elements.length; i++) {
  var element = elements[i];

   function highlight(sentiment){
      if(sentiment.type == "negative"){
        element.style.backgroundColor = "red";
        console.log("neg");
      } else if(sentiment.type == "positive"){
        console.log("pos");
        element.style.backgroundColor = "blue";
      }
    }

    var text = element.textContent;

    getSentiment(text).then(highlight, function(status){
          console.log("error");
    });
   }
  }

 function getSentiment(headline){
  var urltext = "text=" + headline.split(' ').join('+');
  return new Promise(function(resolve, reject){
    var req = new XMLHttpRequest();
      req.open(
              "GET",
              "https://twinword-sentiment-analysis.p.mashape.com/analyze/?"+
              urltext,
              true);

      req.responseType='json';
      req.onload = onResponseReceived;
      req.send(null); 
      function onResponseReceived() {
        var status = req.status;
        if(status ==200){
          resolve(req.response);
        } else {
          reject(status);
        }
      }
  });
 }

---

编辑-请忽略这一点-在这篇文章之前，我从未听说过“承诺”

您希望在收到响应后，而不是在发出请求时调用Highlight情感函数

因此，在onResponseReceived中，在ifstatus==200{block中或在resolvereq.response；本身中，使用返回的数据调用HighlightMotion

即使在收到响应后，您仍然可以完全控制DOM

嗯,，

---

Jim

您应该阅读链接的问题。它们解释了问题所在，即在异步调用之后，您的变量在代码执行时并不是您所期望的。一个相对简单的解决方案是更改：function highlight情绪{to function highlightelement，情绪{和Get感性Text.thenhighlight，functionstatus{到Get感性.thenhighlight.bindnull，元素，functionstatus{谢谢Makyen！这很有效！我知道我无法访问回调中的变量，但无法确定如何传入或正确绑定它，因为还传入了HTTP响应。null元素绑定非常有效！