Promise, async / await

자바스크립트의 Promise는 비동기 작업을 처리하는데 사용되는 객체.

비동기 작업은 특정 작업이 완료되기를 기다리지 않고 다음 코드가 실행되는 것을 의미한다.

Promise는 이러한 비동기 작업을 보다 쉽고 효율적으로 처리하기 위해 도입된 개념.

 

			 성공     실패
const pr = new Promise((resolve, reject) => {

});

 

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve('OK')
    }, 3000)
});

위 함수는
state가 pending(대기) 에서 3초 후 state: fulfilled(이행됨) 으로 변경됨



const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	reject(new Error('error..'))
    }, 3000)
});

위 함수는
state가 pending(대기) 에서 3초 후 state: rejected(거부됨) 으로 변경됨

 

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve('OK')
    }, 3000)
});


pr.then(
	function(result){
    	console.log(result + '가지러가자');
    }
    function(err){
    	console.log('다시 주문해주세요..');
    }
);

실패일시
.catch(
	function(err){}
)

 

promise.all 한꺼번에 실행되고 모두 이행될경우 한번에 알려줌

Promise.all([f1(),f2(),f3()]).then((res) => {
	console.log(res);
})

 

promise.race  한번에 실행되지만 1개라도 실행되면 바로 종료

Promise.race([f1(),f2(),f3()]).then((res) => {
	console.log(res);
})

 

---

async  / await

async function order() {

	try{
            const result1 = await f1();
            const result2 = await f2(result);
            const result3 = await f3(result2);
        } catch(e) {
            console.log(e);
        }
}

async를 붙이면 해당 함수는 항상 프로미스를 반환한다.

프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스로 값을 감싸 이행된 프로미스가 반환되도록 한다.

await은 asnyc가 붙은 함수에서 사용가능하며 프로미스가 처리될때까지 기다린다.

결과는 이후에 반환된다.

async / await을 사용하는 이유는 async와 await을 사용하면 콜백함수보다 간단하고 쉽게 코드를 순서대로 실행할 수 있다!

 

async await을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요없다.

여기에 더해 .catch대신 일반 try catch를 사용할 수 있다.

대부분의 경우 async await을 사용하는 것이 더 편리하다.

만약 async 함수 바깥의 최상위 레벨 코드에선 await를 사용할 수 없다. (*)