Question

我试图学习承诺并遇到以下问题。使用TMDB api我想制作一个简单的页面来检索电影的信息。 TMDB网站声明首先拨打电话获取电影的ID，然后在您拥有ID以检索电影的信息后再拨打第二个电话。所以我必须一个接一个地进行AJAX调用。到目前为止我有这个：

$oForm.on("submit", function(e) {
  e.preventDefault();
  $('#poster').html('<center><img src="img/loading.gif" alt="loading..."></center>'); //gif while poster loads.


  // ========= Function to Retrieve Movie Info w/Movie ID from AJAX1 call  ====================== //
  var retrieveInfo = function(id) {
    var sQueryMovieInfoUrl = "https://api.themoviedb.org/3/movie/" + iTmdbId + "?api_key=" + api_key; //Query string to retrieve Movie Info
    var settingsAjax2 = {
      "async": true,
      "crossDomain": true,
      "url": sQueryMovieInfoUrl,
      "method": "GET",
      "headers": {},
      "data": "{}"
    }

    $.ajax(settingsAjax2) // Second AJAX call for the actual Movie info we want
      .done(function(oInfo) {
        console.log("Inside retrieveInfo. Here is Movie Title.  " + oInfo.title);
        return oInfo;
      }) //end .done

  }; // End retrieveInfo
  // ==================== End retriveInfo Function Expression====================== //

  // ========================================================================================================
  // ======================== Main Body of JavaScript =======================================================        
  // ========================================================================================================
  //  Begin the two AJAX calls needed to first retrieve Movie ID and then retrieve Movie Info                         
  var oData, iTmdbId = 0;
  var sTmdbQuery = $("form").serialize();
  var api_key = "123456789";
  var sQueryMovieIdUrl = "https://api.themoviedb.org/3/search/movie?api_key=123456789&" + sTmdbQuery; // Query string to retrieve movie id

  var settingsAjax1 = {
    "async": true,
    "crossDomain": true,
    "url": sQueryMovieIdUrl,
    "method": "GET",
    "headers": {},
    "data": "{}"
  }
  // End Variable Declarations

  $.ajax(settingsAjax1)
    .done(function(idResponse) {
      console.log(idResponse);
      if (idResponse.total_results > 0) { //Check if any results from search
        iTmdbId = idResponse.results[0].id;
        console.log("Here is The Movie Id: " + iTmdbId);
      } else {
        console.log("No Movie Found. Try Alternate Spelling.")
      }

    }) //end .done AJAX1
    .done(function() {
      // AJAX1 has been successful so this function will execute
      // In case of more then one request, both have to be successful
      console.log("inside AJAX2: " + iTmdbId);
      oMovieInfo = retrieveInfo(iTmdbId);
    }) //end 2nd .done 
    .done(function() {
      console.log("Here is the Movie Info Object: " + oMovieInfo);
    }) //end third .done



}) //End on.submit event handler

问题是没有从retrieveInfo函数返回oMovieInfo对象。这是控制台输出：

Here is The Movie Id: 152  main.js:70:34
inside AJAX2: 152  main.js:80:30
Here is the Movie Info Object: undefined  main.js:84:31
Inside retrieveInfo. Here is Movie Title.  Star Trek: The Motion Picture

第三和第四行与我认为延期应该有效的方式不同步。如果有人输入我做错了什么我会非常感激。第三个.done不等待第二个。完成。我在文档中认为你可以链接jQuery .done方法。

在jQuery中使用.then（）来进行AJAX调用

0 个答案: