javascript - Chrome 扩展中的 API 调用需要按两次按钮

Question

我正在创建一个 Chrome 扩展，它通过 inject.js 在页面上注入(inject) HTML 表单，当输入查询并按下按钮时，通过 background.js 进行 API 调用。然后将内容带回 inject.js 脚本并进行处理。

当我第一次尝试通过 inject.js 进行调用时，出现以下错误:

    Error in event handler for 'undefined': fetchResult is not defined ReferenceError: searchResult is not defined

奇怪的是，当我稍等片刻并再次按下时，查询已被提取。

我第一次怀疑 fetchresult 是未定义的，因为它需要一些时间来获取查询，但我不知道如何解决这个问题。

注入(inject).js:

    function fetch() {

    var fetchResult;

    var fetchquery = document.getElementById('field').value;

    chrome.extension.sendMessage({greeting: fetchquery}, function(response) {
             fetchResults = response.farewell
            constructHTML(fetchResultsResults)      

        });
    };

背景.js:

    function loadXMLDoc(query)
    {

   if (query){
    // new cross origin XML request

   xmlhttp=new XMLHttpRequest();
   xmlhttp.onreadystatechange=function()
    {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         fetchResult = JSON.parse(xmlhttp.responseText);
         }
     }

   xmlhttp.open("GET","http://XXXXXXXXXXXXXXX&q="+query, true);
   xmlhttp.send();

   return fetchResult;

   } else {

       return "noquery";
    }
    };

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
       if (loadXMLDoc(request.greeting) != "noquery"){
            sendResponse({farewell: loadXMLDoc(request.greeting)})
            }
    });

任何帮助将不胜感激!

Answer 1

XMLHttpRequest 是异步，因此您应该调用回调来传递结果，而不是return fetchResult。这是一个例子:

   function loadXMLDoc(query, callback)
   {

   if (query){
    // new cross origin XML request

   xmlhttp=new XMLHttpRequest();
   xmlhttp.onreadystatechange=function()
    {
     if (xmlhttp.readyState==4)
      {
         if(xmlhttp.status==200)
         {
           fetchResult = JSON.parse(xmlhttp.responseText);
           callback(fetchResult);
         } else {
           callback("noquery");
         }
      }
     }

   xmlhttp.open("GET","http://XXXXXXXXXXXXXXX&q="+query, true);
   xmlhttp.send();

   } else {

       callback("noquery");
    }
    };

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
            loadXMLDoc(request.greeting, function(fetchResult) {
              if (fetchResult != "noquery")
                sendResponse({farewell: fetchResult})
              else
                sendResponse({});
            });
            return true; // See the description of https://developer.chrome.com/extensions/extension.html#property-onMessage-sendResponse.
    });