• 자바스크립트 Promise 동기 프로그래밍 : 마이구미
    Javascript 2016. 6. 9. 21:16

    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들이 있다.

    .

    댓글 0

Designed by Tistory.