자바스크립트 Promise 동기 프로그래밍 : 마이구미

javascript promise에 대해 알아보자!

http://mygumi.tistory.com/328 최신 글을 참고하자.

자바스크립트를 하다보면 다들 한번씩은 겪었을 것이다.
비동기 프로그래밍의 문제점을 관한 이야기이다.
그래서 필요한 경우는 본인이 원하는 순서대로 제어하고 싶다.
정말 간단한 예를 살펴보자.

$('.button').click(function(){
    $.getJSON('package.json',function(result) {
        console.log("?");
    });
    console.log("!");
});

다들 실행 결과는 알 것이다.
콘솔창에는 느낌표부터 출력 후 물음표가 출력될 것이다.
처음에는 그냥 setTimeout으로 시간을 걸어 해결할 것이다.
콜백으로 해결한다는 둥 Watefall을 쓴다는 둥 when을 쓴다는 둥
많은 해결방법이 있긴하다.
여기서는 promise를 통해 해결해보자.

async(1,function(){
    async(2,function(){
        async(3,function(){
            async(4,function(){
                async(5,function(){
                    console.log("콜백 지옥을 맛보아라")
                })
            })
        })
    })
})

지금부터 callback 지옥을 벗어나보자.

본인의 경험을 통해 진행을 할 것이다.
본인은 인스타그램 API를 이용하여 작업을 하고 있었다.
일단 해시태그를 이용하여 관련 데이터를 가져온 상황이었다.
여기서 이미지뿐만 아니라 이미지에 관련된 데이터들을 같이 보여줄 생각이었다.

function getURL_aTag() {
    var rows = document.querySelectorAll('#target > div');
    for (var i = count + 1, row; row = rows[i]; i++) {
        var aUrl = row.querySelector('a').href;
        var instagramUrl_media = 'https://api.instagram.com/oembed/?callback=?&url=' + aUrl + '?';
        $.getJSON(instagramUrl_media,function(){
           //............ TO DO
        });
    }
}

그냥 단순하게 for문으로 돌려서 넣어야지.. 바보같은 생각으로 진행하였다.
저렇게 돌린다면 실행은 잘 되지만.. 결과적으로 실행 결과는 뻔하다.
순서가 지멋대로 돌릴때마다 매번 순서는 아무도 모를 것이다.
상관없다고 생각하고 help 함수 하나 더 만들어서 뿌려줄 때 끼워맞추면 되긴하다. 

하지만 뭔가 맘에 안 들었다.
일단 간단히 promise 살펴보자

var promise = new Promise(function(resolve, reject) {
  if (true) {
    resolve("해결했다요!");
  }
  else {
    reject(Error("거절했다요!"));
  }
});

Promise 생성자는 콜백함수에서 두 개의 파라미터를 가진다.
정상 시 resolve 비정상 시 reject를 호출한다.

promise.then(function(result) {
  console.log(result); // "해결했다요!"
}, function(err) {
  console.log(err); // "거절했다요!"
});

then을 통해 성공 콜백, 실패 콜백을 이용할 수 있다.
catch문도 사용할 수 있고, then을 연결하여 사용할 수도 있다.(응용 바람)
본인이 적용한 것을 보자.

var arr = [];
//....순서대로 호출하고 싶은 url들 push
return getJSON(arr).then(function(response){
    return Promise.all(response.map(getJSON));
}).then(function(chapters){
    chapters.forEach(function(chapter){
        //..........
    })
})

본인은 promise 배열에 미리 사용할 url들을 넣어두었다.
Promise.all()를 통해 response 배열을 json promise의 배열과 매핑한다.
그 결과 chapters에는 순서대로 json들이 있다.

.