잘 정리해보자

Promise 쓰기 (비동기 통신 시 사용) 본문

javascript

Promise 쓰기 (비동기 통신 시 사용)

토마토오이 2021. 4. 13. 10:34

Promise()

: 비동기 통신에 사용되며, 통신 후 callback 들을 받은 후 모든 콜백을 받은 시점을 캐치하는 것.

-> 콜백 콜백 콜백 ... 대신 쓸 수 있다.

 

 

예제 : 

function promise1(){

    return new Promise(function(resolve,reject){

        setTimeout(function(){

            console.log('promise1');

            resolve();

        },100);

    });

}



function promise2(){

    return new Promise(function(resolve,reject){

        setTimeout(function(){

            console.log('promise2');

            resolve();

        },200);

    });

}



function promise3(){

    return new Promise(function(resolve,reject){

        setTimeout(function(){

            console.log('promise3');

            resolve();

        },300);

    });

}



//promise1,2,3을 호출하고 callback받는 Promise.all()

Promise.all([promise1(), promise2(),promise3()]).then(function () {

    console.log("end");

});

 

각각의 promise 함수에서 resolve()로 비동기 작업이 끝났다는 것을 알려주고, 

Promise를 동작시키는 Promise.all() 에서 각 함수들의 resolve를 캐치해 .then()을 실행한다.

 

- resolve()는 성공 시, 결과

- reject()는 에러 시, 결과 (해당 promise가 중단된 상태)

 

▶ promise는 resolve, reject 가 실행되기 전까지는 해당 promise는 계속 실행되고 있다.

 

 

결과 : 

promise1

promise2

promise3

end

 

 

 

하나의 promise만 실행시키고 싶을 때는 promise함수명만 호출하고 .then() 실행.

...

promise1().then(function(){

     console.log('end');

});

 

 

 

 

promise callback시, 파라미터 전달하는 경우

function promise1(){

    return new Promise(function(resolve,reject){

        setTimeout(function(){

            console.log('promise1');

            resolve('test message');

        },100);

    });

}


promise1().then(function(value){

     console.log('end');
     console.log(value);

});

resolve('test message') 라고 실행시키면 promise를 실행시킨 then의 function에서 파라미터를 받아 사용할 수 있다.

 

실행결과 :

end

test message

 

> 콘솔에 value가 찍힘 (value = 'test message') 

 

 

 

 

'javascript' 카테고리의 다른 글

let, const 선언  (0) 2021.04.11
'use strict'; 사용  (0) 2021.04.11
Lint (린트)  (0) 2021.04.11
Babel (바벨)  (0) 2021.04.11
웹펙 - 로더 (loader)  (0) 2021.04.10
Comments