더 나은 Ajax 작성 방법

|

jQuery를 사용하여 AJAX 호출을 작성하는 표준 방법은 $.ajax() 함수를 사용하는 것이다.

$.ajax({
    data: someData,
    dataType: 'json',
    url: '/path/to/script',
    success: function(data, textStatus, jqXHR) {
        // When AJAX call is successfuly
        console.log('AJAX call successful.');
        console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // When AJAX call has failed
        console.log('AJAX call failed.');
        console.log(textStatus + ': ' + errorThrown);
    },
    complete: function() {
        // When AJAX call is complete, will fire upon success or when error is thrown
        console.log('AJAX call completed');
    };
});

기본적으로 이렇게 사용하는데, 여기는 몇가지 단점이 있다.

  • 중첩문제로 가독성이 떨어짐
  • 체인 및 합성의 어려움
  • 지원중단 (1.8 이후로 jqXHR.success(), error, complete가 공식적으로 추천되지 않는다)

그래서 Promise패턴을 사용하는 것이 좋다.

Promises and deferred objects

  • .success() 대신 .done()을 사용한다.
  • .error() 대신 .fail()을 사용한다.
  • .complete() 대신 always()를 사용한다.
$.ajax({
    data: someData,
    dataType: 'json',
    url: '/path/to/script'
}).done(function(data) {
    // If successful
   console.log(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
    // If fail
    console.log(textStatus + ': ' + errorThrown);
});

Chaning works, just as usual

var ajaxCall = $.ajax({
    context: $(element),
    data: someData,
    dataType: 'json',
    url: '/path/to/script'
});

ajaxCall.done(function(data) {
    console.log(data);
});

Multiple AJAX calls

var a1 = $.ajax({...}),
    a2 = $.ajax({...});

$.when(a1, a2).done(function(r1, r2) {
    // Each returned resolve has the following structure:
    // [data, textStatus, jqXHR]
    // e.g. To access returned data, access the array at index 0
    console.log(r1[0]);
    console.log(r2[0]);
});

Dependence chain of AJAX requests

var a1= $.ajax({
             url: '/path/to/file',
             dataType: 'json'
         }),
    a2 = a1.then(function(data) {
             // .then() returns a new promise
             return $.ajax({
                 url: '/path/to/another/file',
                 dataType: 'json',
                 data: data.sessionID
             });
         });

a2.done(function(data) {
    console.log(data);
});

Modularizing AJAX requests

// Generic function to make an AJAX call
var fetchData = function(query, dataURL) {
    // Return the $.ajax promise
    return $.ajax({
        data: query,
        dataType: 'json',
        url: dataURL
    });
}

// Make AJAX calls
// 1. Get customer order
// 2  Get customer ID
var getOrder = fetchData(
    {
        'hash': '2528ce2ed5ff3891c71a07448a3003e5',
        'email': 'john.doe@gmail.com'
    }, '/path/to/url/1'),
    getCustomerID = fetchData(
    {
        'email': 'john.doe@gmail.com'
    }, '/path/to/url/2');

// Use $.when to check if both AJAX calls are successful
$.when(getOrder, getCustomerID).then(function(order, customer) {
    console.log(order.data);
    console.log(customer.data);
});
참고