Promise 정리

Promise

Javascript에서 Promise를 왜 써야할까?

일단 Promise는 최신 브라우저에서만 사용되기 때문에

Promise를 지원하지 않는 옛버전 IE8+, Chrome, Firefox, IOS 4+, Safari 5+, Opera 에서 사용하려면 polyfil을 선언해주어야한다.

polyfil <- 다운로드

단일 스레드

---

javascript는 단일 스레드로서 하나의 작업을 하면서 기다리는동안 다른작업을 할 수 없다.

그렇기때문에 javascript는 callback을 이용하여 어느정도 해결할수 있는데.

단일스레드의 문제 

예) 1. 이미지로드 -> 2. 이미지로딩 -> 3.이미지를 이용한 작업 -> 4. 다음작업(이미지로딩하는 동안 기다려야함) 

                           |---- 낭비 ---|

콜백을 통한 해결

예) 1. 이미지로드 -> 4. 다음작업          ->  3. (이미지로딩 완료) 이미지를 이용한 작업

                       └> 2. 이미지 로딩  ┘

자바스크립트 예제(예제1)

var img = document.querySelector('.img');

img.addEventListener('load',function(){
     //img 로딩후에 실행해야할 동작
});

//다음동작

콜백 중첩

---

콜백이 중첩이되면 코드가 많이 더러워지고 가독성이 떨어짐

자바스크립트 예제(예제2)

// 하나의 콜백작업후 다른 콜백을 필요로하는 작업을 하는경우
// 예제에서는 비동기작업으로 setTimeout을 이용

setTimeout(function(){
    //작업1
    setTimeout(function(){
        //작업2
        setTimeout(function(){
            //작업3

        },1000);
    },1000);
}, 1000);

작업1 완료 -> 작업2 실행, 작업2 완료 -> 작업3을 실행하는 예제이다.

작업이 늘어날수록 가독성이 떨어지고 수정할때 어디를 고쳐야하는 찾기 힘듬.

Promise 사용(예제3)

var w1 = new Promise(function(resolve,reject){

    setTimeout(function(){
        //작업1
        resolve(넘길데이터);

    },1000);

}).then(function(data){

    var w2 = new Promise(function(resolve,reject){

        setTimeout(function(){
            //작업2
            resolve(넘길데이터);

        },1000);
    });

    return w2;

}).then(function(data){

    var w3 = new Promise(function(resolve,reject){

        setTimeout(function(){

            //작업3
            resolve(넘길데이터);

        },1000);
    });

    return w3;

}).then(function(data){

//작업3 완료된후 동작

});

예제처럼 then 메소드를 이용하여 비동기작업이 완료된후 다음작업을 실행할수 있다.

예제2 보다 예제3이 코드가 더 길어졌지만 코드 분석하기는 훨씬 쉬워졌다.

이 예제는 Promise기능중 하나이며 Promise에서는 비동기를 다루는데 좋은 기능들을 제공하고 있다.

더 좋은 기능들에 대해 알고 싶다면 여기를 참조하기 바란다.