[JavaScript] 프로미스 객체 Promise

 

 

#1 프로미스

Promise API는 비동기 API 중 하나이다. 태스크 큐가 아닌 잡 큐를 사용하며, 태스크 큐보다 우선순위가 높다.

Promise는 비동기 작업을 표현하는 자바스크립트의 객체로, 비동기 작업의 진행/성공/실패 상태를 표현한다. > 비동기 처리의 순서를 표현할 수 있다.

setTimeout( () => {
	console.log("타임아웃1");
}, 0);

Promise.resolve().then( () => console.log("프로미스1") );

setTimeout( () => {
	console.log("타임아웃2");
}, 0);

Promise.resolve().then( () => console.log("프로미스2") );

// 출력 순서: 
// 프로미스1 프로미스2
// 타임아웃1 타임아웃2

 

 

#2 프로미스의 상태(states) 3가지

• Pending (대기): 비동기 처리 로직이 미완료된 상태
• Fulfilled (이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected (실패): 비동기 처리가 실패하거나 오류가 발생한 상태

 

 

#3 프로미스 메서드

• then
• catch
• finally

// Promise 메서드
promise
	.then(data => {		// 성공 시 실행할 콜백 함수를 인자로 넘긴다.
    	console.log('성공: ', data)
    })
    .catch(e => {		// 실패 시 실행할 콜백 함수를 인자로 넘긴다.
    	console.log('실패: ', e)
    })
    .finally(() => {	// 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
    	console.log('종료')
    })	
    
    // then(callback1, callback2)로 callback1의 자리에 성공, callback2의 자리에 실패 메서드를 인자로 넘길 수 있다.

 

+ 메서드 체이닝

연속적인 코드 줄에서 개체의 메서드를 반복 호출하는 것을 의미한다. 메서드가 객체를 반환했을 때, 그 반환값(객체)이 다른 메서드를 호출할 수 있다.

프로미스 하나에 .then이 여러 개 추가되었다고 해서 체이닝이 아니다. 반환된 객체로 다른 메서드를 다시 호출해야 한다.

앞에서부터 차례로 실행되며 반환값을 뒤의 메서드에 전달하는 식이다.

// 메서드 체인
// then/catch 메서드가 또 다른 promise를 리턴하여 비동기 코드에 순서를 부여한다.
promise
	.then(data => {
    	return fetchUser(data)	// 호출 주체가 함수를 끝낸 뒤 자기자신을 리턴하도록 구현한다.
    })
    .then(user => {
    	console.log('User : ', user)
    })
    .catch(e => {
    	console.log('실패: ', e)
    })	.then(data => {
    	return fetchUser(data)	// 호출 주체가 함수를 끝낸 뒤 자기자신을 리턴하도록 구현한다.
    })

 

 

#4 async 메서드 / await 키워드

Promise를 활용한 비동기 코드를 간결하게 작성하는 문법이다. 비동기 코드를 동기 코드처럼 간결하게 작성 가능하다.

await 키워드는 반드시 async 함수 내에서만 사용해야 하며, async 함수는 반드시 Promise 객체를 반환한다.

function 키워드 앞에 async를 붙여 생성한다.

async function asyncFunc() {
	let data = await fetchData()	
    let user = await fetchUser(data)	// fetchData, fetchUser는 Promise를 리턴
    	return user
}

await 키워드는 then 메서드 체인의 연결처럼 순서대로 동작하며 비동기 코드에 쉽게 순서를 부여한다.

async function asyncFunc() {
	let data1 = await fetchData1()
	let data2 = await fetchData1(data1)
	let data3 = await fetchData1(data2)
}

function promistFunc() {
	return fetchData1()
    	.then(fetchData2)
    	.then(fetchData3)
}