ajax로 여러번 api 호출시 깔끔한 방법이 뭘까요?

Question

$.ajax({
    url: '첫번째 api 호출',
    type: 'post',
    data: $('#form').serialize(),
    dataType: 'json',
    success: function(data){
     console.log(data);
     if(data.resultCode == 'success'){
      console.log('두번째 api 호출');

$.ajax({
       url: '두번째 api 호출',
       type: 'post',
       data: $('#form').serialize(),
       dataType: 'json',
       success: function(data){
        f(data.resultCode == 'success'){
             console.log('세번째 api 호출');

$.ajax({
              url: '세번째 api 호출',
              type: 'post',
              data: $('#form').serialize(),
              dataType: 'json',
              success: function(data){
             console.log(data);
             
            }
           });
          }
       }
      });
     }else{
      console.log('메일발송');
      f.action = 'send.php';
      f.submit();
     }
    }
   });이런식의 a api결과에 따라서 b api를 호출하고 b의 결과에따라서 c의 api를 호출하는 방식에 있어서어떻게 하는방법이 더 깔끔하고 효율적인 코드일까요?

쌈박한매54 · Accepted Answer

1. api를 통해서 페이지 호출 및 리턴값을 받는걸 별도의 함수(function)화 시켜서 쓰시는걸 추천드립니다.

2. api를 여러번 호출해야 한다면 상황에 따라 다르겠지만

리턴값에 따라서 자바스크립트 변수나 함수 또는 input 타입의 값을 가져와야 하는 상황이 아니라면

최초 api를 통해 호출되는 페이지에서 다른페이지를 호출함으로써 최종적인 값만 받아오는 방향도 좋을것 같습니다.

자사스크립트 호출 -> A페이지 (결과값에 따라 B 페이지와 C 페이지 호출) 리턴값 -> 자바스크립트 마무리

이런방법으로 하시면 최적화 작업에 도움이 되실꺼에요.

탈퇴한 사용자 · Answer

안녕하세요.소스 상으로 보면 1번 API의 결과 data로 2번 API의 파라미터로 사용되는것 같진 않아 순차적으로 실행이 안돼도 되는 것으로 보이는데 맞는건지요?3 API 모두 async로 동시에 처리해서 3개가 완료 됐을 때 처리하는 경우에는 아래처럼 처리 할 수 있습니다.let options = {
    type: 'post',
    data: $('#form').serialize(),
    dataType: 'json',
};

$.when($.ajax(options1), $.ajax(options2), $.ajax(options3))
.done(function(data1, data2, data3) {
    // 성공 시 처리
    console.log('첫번째 API 결과');
    console.log('두번째 API 결과');
    console.log('세번째 API 결과');
})
.fail(function() {
    // 실패 시 처리
});

하얀고슴도치236 · Answer

function A(){
// 1번째 함수
// success check 후 B(); 
}

function B(){
// 2번째 함수
// success check 후 C(); 
}

function C(){
// 3번째 함수
}
위와 같이 여러개의 function 으로 분리해두고 상위 함수가 success  된 경우 하위 함수를 실행시키는것이 좋습니다.저런식으로 ajax 안에 ajax 안에 ajax 처럼 처리하시면 중간에 핸들링하기도 어렵고 유지보수할때도 어려우실수있습니다 ^^