이전 호출의 응답이 필요한 여러 AJAX API 호출에 대한 모범 사례가 있습니까?

Question

사용자가 리소스와 날짜가 포함 된 CSV를 업로드하고 이러한 리소스에 대한 모든 일정 정보를 관리 소프트웨어에 추가 할 수있는 내부 페이지를 만들고 있습니다. 이 일을하기에 꽤 괜찮은 API가 있는데, 나는 작동하는 모델을 가지고있다. 그러나 그것은 ... 완고한 것 같다.

각 리소스에 대해 새 세션을 시작한 다음 새 예약을 만든 다음 리소스를 추가하고 예약이 차단되지 않았는지 확인한 다음 예약을 제출하십시오. 대부분의 호출은 프로세스의 다음 단계에 필요한 변수를 리턴하므로 각각은 이전의 Ajax 호출에 의존합니다. 둘 다 쉽게, 또는 그것을 더 "적절한"방법이 될

$.ajax('startnewsession').then($.ajax('createreservation').then('etcetc')) 

이 작동하지만, 내가 거기에있다 같은 느낌 : 현재 내가 중첩 아약스를 통해이 일을 해요

이 유사 호출 더 깨끗한 코드와 적응성을 위해.

Answer 1

의사 소통하는 API를 변경할 수 없다고 가정하면 올바르게 수행됩니다.

다음 중 하나에 대한 응답 데이터가 필요하면 중첩 된 Ajax 호출을 수행해야 할 필요가 없습니다. 그러나 약속 (.then)은 콜백을 수행하는 것보다 좀 더 예쁘게 만듭니다.

적절한 해결책 (가능한 경우)은 물론 클라이언트에서 서버로의 왕복 횟수가 적게 들도록 API를 구현하는 것입니다. 예약 생성을위한 협상 프로세스의 각 단계 사이에 사용자 입력이 없다는 것을 고려할 때 API는 사용자가 더 많은 입력을 요구할 때까지 클라이언트에 문의 할 필요없이 예약 생성을위한 전체 흐름을 완료 할 수 있어야합니다.

각 ajax 호출이 실패해야 할 경우에 대비하여 오류 처리를 수행하십시오. 이전에 실패한 요청의 손상된 데이터로 다음과 같은 API 호출을 작성하기를 원하지 않습니다.

var baseApiUrl = 'https://jsonplaceholder.typicode.com'; 
$.ajax(baseApiUrl + '/posts/1') 
    .then(function(post) { 
    $.ajax(baseApiUrl + '/users/' + post.userId) 
     .then(function(user) { 
     console.log('got name: ' + user.name); 
     }, function(error) { 
     console.log('error when calling /users/', error) 
     }); 
    }, function(error) { 
    console.log('error when calling /posts/', error) 
    }); 

Answer 2

짧은 대답은 : 평소와 같이 나는 다음과 같은 몇 가지 사슬을 할 노력하고있어 :

ajaxCall1.then(
    response => ajaxCall2(response) 
).then(
    response => ajaxCall3(response) 
) 

내가 when의 사용을 피하는 것을 시도하고있다. 평소와 마찬가지로 (그리고 내기도) 1 회 ajax 호출 (양식 제출 용), 예를 들어 2 개의 체인 연결 아약스 호출이있는 경우 테이블에 대한 데이터를 가져와야 할 경우 총 행 개수에 대한 첫 번째 쿼리와 0, 데이터에 대한 또 다른 호출.

function getGridData() { 
     var count; 
     callForRowsCount().then(
     (response) => { 
      count = response; 
      if(count > 0) { 
       return callForData(); 
      } else { 
       return []; 
      } 
     } 
    ).then(response => { 
     pub.fireEvent({ 
      type: 'grid-data', 
      count: count, 
      data: response 
     }) 
     }) 
} 

pub lisher 트리거 이벤트를, 나는 내 모든 구성 요소가 업데이트가이 경우에는 내가 사용하고 있습니다.

일부 드문 경우지만 when을 사용해야합니다. 그러나 이것은 항상 나쁜 디자인입니다. 경우에 따라 기본 요청 전에 추가 데이터 팩을로드해야하거나 백엔드가 대량 업데이트를 지원하지 않을 때 발생하며 아약스 호출 팩을 보내야 많은 데이터베이스 엔터티를 업데이트 할 수 있습니다. 이런 식으로 :

var whenArray = []; 
if(require1) { 
    whenArray.push(ajaxCall1); 
} 
if(require2) { 
    whenArray.push(ajaxCall2); 
} 
if(require3) { 
    whenArray.push(ajaxCall3); 
} 
$.when.apply($, whenArray).then(() => loadMyData(arguments));