Question

我正在制作GET请求，以便通过链接获取YouTube的视频数据对象。我想我不明白，当我console.log返回的请求时，它会被记录到浏览器控制台

＆＃13;

function videoThumb(url){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var myArr = JSON.parse(xmlhttp.responseText);
      //printing to the console
      console.log(myArr);
      //object returned per call
      return myArr;
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}
  
var obj = videoThumb("https://www.googleapis.com/youtube/v3/videos?part=statistics&id=QIc00XImJmA&key=AIzaSyCC0R6ZmeHW0pXVQxE7RJPTt5_JvwTGwXA")

//obj should have returned value from `videoThumb`

＆＃13;

但是当我将返回的对象值存储在变量obj中时，再次调用obj返回undefined。

Answer 1

从xmlhttp范围中定义变量。

function videoThumb(url){
     var r = false,
         xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             // update the variable response
             r = JSON.parse(xmlhttp.responseText);
         }
     }
     xmlhttp.open("GET", url, false); // change async to false to wait for response although this is bad!
     xmlhttp.send();
     return r;
}

var obj = videoThumb("https://www.googleapis.com/youtube/v3/videos?part=statistics&id=QIc00XImJmA&key=AIzaSyCC0R6ZmeHW0pXVQxE7RJPTt5_JvwTGwXA");
//obj should have returned value from `videoThumb` 
console.log(obj);

上述解决方案对时间和网页性能有害。我使用它得到了以下错误，并认为这是因为我在页面加载时调用了该函数。

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

我推荐的最好方法是使用如下的回调函数。

    function videoThumb(url, callback){
         var xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                 // update the variable response
                 callback(JSON.parse(xmlhttp.responseText));
             }
         }
         xmlhttp.open("GET", url, true);
         xmlhttp.send();
    }

videoThumb("https://www.googleapis.com/youtube/v3/videos?part=statistics&id=QIc00XImJmA&key=AIzaSyCC0R6ZmeHW0pXVQxE7RJPTt5_JvwTGwXA", function(response){
    console.log(response);
});

使用HTTP GET请求返回对象是未定义的

1 个答案: