Question

我正在使用API和mananged来使.ajax函数正常工作。现在，我需要使用.ajax函数之外的API信息。为此，我尝试使用jQuery的.done函数，但它无法正常工作。我看了几个类似问题的解决方案，但我没有运气。我尝试使用和不使用$ .when函数，但都不起作用。

＆＃13;

//create user prototype
function user(name,logo,status,streamLink,streamViews,streamGame){
  this.name = name;
  this.logo = logo;
  this.status = status;
  this.streamLink = streamLink;
  this.streamViews = streamViews;
  this.streamGame = streamGame;
  this.getUserInfo = function(userName) {
    return $.ajax({
      dataType: "jsonp",
      data:{},
      url:'https://api.twitch.tv/kraken/users/'+userName+'?callback=?',
      success:function(data){
        this.name = data.display_name;
        this.logo = data.logo;
        this.bio = data.bio;
        $('.test').html(this.logo);
      }     
       
    }) 
  }
}

//create user for each stream
var freeCodeCamp = new user('freeCodeCamp');
var medrybw = new user('medrybw');
//call getUserInfo function
freeCodeCamp.getUserInfo('freeCodeCamp');
medrybw.getUserInfo('medrybw');


//display medrybw status (test) - not working! 
when(medrybw.getUserInfo()).done(function(data){
  alert('test');
  $('.test2').html(medrybw.bio);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<br>
<br>
<div class="test2"></div>

＆＃13;

不工作的部分是最后一个功能。如果我删除$ .when部分，我会得到＆＃34; test＆＃34;警报工作正常，但不是另一条线。使用$ .when，两条线都没有运行。我真的很困惑。

Answer 1

如果您使用单一承诺，则无需使用$.when。只是做

medrybw.getUserInfo().done(...);

（事实上，如果你将一个承诺传递给$.when，它会返回它，即$.when(x) === x）。

如果我删除$ .when部分，我会让“测试”警报正常工作，但不是另一行。

该行本身“正常”，问题是medrybw.bio不存在。

this回调中的

success未指向该对象，因此永远不会在bio上设置medrybw属性。有关该问题的解决方案，请参阅How to access the correct `this` context inside a callback?。

我强烈建议您熟悉浏览器的开发人员工具，以便设置断点和检查变量，更好地分析代码并知道哪些有效，哪些无效（而不是跳到结论）。

Answer 2

您不需要$.when()部分。您遇到的问题是this在您的ajax调用的jqXHR函数中引用了user对象，而不是success对象。要解决此问题，请使用.bind(this)。

其次，getUserInfo()需要一个userName参数，但是当你稍后调用它时，你会省略该参数。此外，多次调用getUserInfo()会导致冗余和不必要的ajax请求。第一次调用该函数时，可以将其替换为仅返回原始jqXHR对象的函数，并避免冗余的ajax调用，同时还删除后续调用中对userName参数的要求。 / p>

//create user prototype
function user(name,logo,status,streamLink,streamViews,streamGame){
  this.name = name;
  this.logo = logo;
  this.status = status;
  this.streamLink = streamLink;
  this.streamViews = streamViews;
  this.streamGame = streamGame;
  this.getUserInfo = function(userName) {
    var jqXHR = $.ajax({
      dataType: "jsonp",
      data:{},
      url:'https://api.twitch.tv/kraken/users/'+userName+'?callback=?',
      success:function(data){
        this.name = data.display_name;
        this.logo = data.logo;
        this.bio = data.bio;
        $('.test').html(this.logo);
      }.bind(this)     
       
    });
    this.getUserInfo = function(){return jqXHR;};
    return jqXHR;
  }
}

var medrybw = new user('medrybw');
medrybw.getUserInfo('medrybw');

//display medrybw status (test) - not working! 
medrybw.getUserInfo().done(function(data){
  console.log(data);
  $('.test2').html(medrybw.bio);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<br>
<br>
<div class="test2"></div>

仅在.ajax完成时运行代码（在.ajax函数之外）

2 个答案: