Jquery when 사용(Jquery Promise, 순서있는 ajax)

 

Jquery에서 ajax를 활용하여 데이터를 받아오는 기능은 어렵지 않다.

아래의 ajax구조는 흔히 사용되는 기본구조이다.

$.ajax({
    url: 'test.json',
    type: 'get',
    success: (result) => {
        console.log(result);
    }, fail: (error) => {
        console.log(error);
    }
});

 

만약 이러한 ajax를 한번이 아니라 여러번 통해서 서버에서의 정보를 가져오는데, 순서를 보장받게 하려면 콜백 형식으로 코드를 만들던가 아니면 Promise를 사용한다.

콜백형식으로 만들면 코드가 너무 복잡하여...Promise를 사용하는 경우가 대부분이다.

아래의 코드는 프로미스를 활용한 코드이다.

new Promise( (succ, fail)=>{
    $.ajax({
        url: 'test.json',
        type: 'get',
        success: (result) => {
            console.log(result);
            succ(result);  //성공하면
        }, fail: (error) => {
            console.log(error);
            fail(error);  //실패하면
        }
    });
}).then( (arg) =>{   //이런식으로 이어간다.
    $.ajax({
        url: 'test2.json',
        type: 'get',
        success: (result) => {
            console.log(result);
        }, fail: (error) => {
            console.log(error);
        }
    });
});

 

프로미스를 활용하면 ajax를 순서있게 실행 할 수 있지만 코드가 길어지거나 보기가 힘들다는 단점도 존재 한다.

then에 들어가야할 코드를 외부로 빼도 매우 귀찮은 일이 아닐 수 없다.

그런데, Jquery에서는 조금 더 쉽게 이러한 기능을 구현 할 수 있게 도와주고 있다.

아래 코드를보자.

$.when($.ajax('test.json'), $.ajax('test2.json')).done( (arg1, arg2, jqXHR)=>{
    console.log('result : ',arg1);
    console.log('status : ',arg2);
    console.log('response object : ',jqXHR);
}).fail((arg1, err, jqXHR)=>{
    console.log('result : ',arg1);
    console.log('err : ',err);
    console.log('response object : ',jqXHR);
});

 

누가봐도 어렵지 않는 직관적인 명칭으로 되어 있다.

done은 끝났을 때 다음행위를 뭐 할지를 정해주면되고, fail은 실패했을때 뭐 할지를 의미한다.

when 함수에는 요청하고자 하는 ajax를 넣어주면된다. (물론 실행하고자 하는 비동기 행위를 넣어도 된다.)

 

다음행위를 하려면 Promise와 마찬가지로 then 함수를 넣어주면된다.

아래코드를 보자.

$.when($.ajax('test.json'), $.ajax('test2.json')).done( (arg1, arg2, jqXHR)=>{
    console.log('result : ',arg1);
    console.log('status : ',arg2);
    console.log('response object : ',jqXHR);
}).fail((arg1, err, jqXHR)=>{
    console.log('result : ',arg1);
    console.log('err : ',err);
    console.log('response object : ',jqXHR);
}).then( (func1Result, func2Result)=>{  //첫번째 then에서는 done에서 만들어진 결과가 넘어온다.
    console.log('next doing1');
    console.log(func1Result);
    console.log(func2Result);
    return {result1:func1Result, result2:func2Result};  //다음 then에 내용 전달
}).then( (result1, result2)=>{  //첫번째 then에서 리턴한 값이 넘어온다.
    console.log('next doing2');
    console.log(result1);  //value1
    console.log(result2);  //value2
});

 

then으로 결과를 이어가려면 위 내용처럼 첫번째 then 이후에는 return을 통해서 값을 조립해서 전달 해 주면된다.

코드도 깔끔해지고 순차도 보장하므로 when을 한번 써보는 것도 나쁘지 않을 것 같다.