jQuery 및 Ajax로 비동기 API 호출하기

Question

검색 버튼을 클릭하면 두 번의 API 호출이 필요합니다. 두 번째 호출에는 첫 번째 요청의 데이터가 필요하므로 두 번째 호출을 지연시키기 위해 일종의 비동기 함수가 필요합니다. 검색 버튼을 1 회 클릭 할 때마다 2 회의 API 호출 만하는 것도 중요합니다.

$(document).ready(function(){ 
    $("#searchButton").click(function(){ 
     var requestData = $("#searchBox").val(); 
     var resultElement = $('#resultDiv'); 
     var url = "https://api.trello.com/"; 
     var member_id_list = ""; 

     $.ajax({ 
      method: "GET", 
      url: url + "search?title="+requestData 
     }) 
     .done(function(data){ 
      $.each(data.items, function(key, value){ 
       if(value.member_id !== undefined){ 
        member_id_list += value.member_id + ";"; 
       } 
       resultElement.append($("<ul>").text(value.title)).append(value.body).addClass("question-body"); 
       $("ul").addClass("question-title"); 
      }); 

      $(document).ajaxSuccess(function(){ 
       var member_id_list = member_id_list.slice(0, -1); 
       $.ajax({ 
        method: "GET", 
        url: url + "/member/"+ member_id_list 
       }) 
       .done(function(data){ }); 
      }); 
     }); 
    }); 
}); 

(I 성공적으로 너무 많은 요청을 제출하지 않고 두 번째 전화를 걸 수 없었던 것처럼) 내가 2 API 호출로 어떻게 할 것인지와 부분을 완료하지 않은 : 여기에 코드입니다.

Answer 1

: 여기

는 제안 코드입니다.

ajax 요청이 성공적으로 완료 될 때마다 ajaxSuccess가 호출됩니다. Ajax가 무엇을 호출하든간에 : 그것은 매번 실행됩니다. 당신이 원하는 무엇

첫 번째는 (되는 .done() 함수를) 수행 후 두 번째 호출을 트리거 또는 대안 당신은 또한 주먹 아약스 호출 (일단 .success() 함수)

$.ajax({ 
     method: "GET", 
     url: url + "search?title="+requestData 
    }) 
    .done(function(data){ 
     ... 
    }) 
    .success(function(data){ 
     // second ajax call here! 
     // or all code here if you only want to work with the data if successful 
    }) 

의 성공 기능을 사용할 수 있습니다

편집 : 코드에 더 밀접하게 상대 : 나는 당신이해야 할 모든 라인

$(document).ajaxSuccess(function(){ 

와 닫는 라인 밖으로을 생각합니다. 그러나 서버가 오류를 반환하면 done 함수도 실행된다는 사실을 생각해야합니다.

Answer 2

synchronous : $.ajax에 대한 매개 변수 async: false으로 요청을 시도해야합니다. 내가 솔루션 ajaxSuccess을 사용하지만 첫 번째 아약스 호출의 수행 기능의 두 번째 아약스 전화를 거는 아니라고 생각

$(document).ready(function(){ 
    $("#searchButton").click(function(){ 
     var requestData = $("#searchBox").val(); 
     var resultElement = $('#resultDiv'); 
     var url = "https://api.trello.com/"; 
     var member_id_list = ""; 

     $.ajax({ 
      async: false, 
      method: "GET", 
      url: url + "search?title=" + requestData, 
      success: function(data) { 
       $.each(data.items, function(key, value){ 
        if(value.member_id !== undefined){ 
         member_id_list += value.member_id + ";"; 
        } 
        resultElement.append($("<ul>").text(value.title)).append(value.body).addClass("question-body"); 
        $("ul").addClass("question-title"); 
       }); 
      } 
     }); 

     var member_id_list = member_id_list.slice(0, -1); 
     $.ajax({ 
      async: false, 
      method: "GET", 
      url: url + "/member/"+ member_id_list, 
      success: function(data) { 
       // Do whatever you need after the second request 
      } 
     }); 
    }); 
});