[Tech-Talk] Promiss와 Acync / Await

⚠️ 해당 게시글은 모던애자일 팀원이 준비한 테크톡 내용을 스크랩했습니다.

출처 : 모던애자일 3기 백승범 블로그

Promise와 Async,Await

 

테크톡 주제로 Promise와 Async, Await 에 대하여 발표를 했습니다.

잊어먹지 않도록 블로그에 정리해보도록 하겠습니다!

​

Promise란?

- 프로미스는 JS에서 비동기 처리에서 사용되는 객체. (ES6때 도입)

- Promise에는 3가지의 상태가 존재

​

Promise의 3가지 상태

​

1. Pending(대기) 상태

이행, 실패 값이 전달되지 않은 초기 상태

​

2. Fulfilled(이행) 상태

완료, 성공적으로 값을 전달한 상태

​

3. Rejected(실패) 상태

값에 에러가 발생한 상태

​

Promise의 사용법

- Promise는 executor라는 콜백함수를 전달하여 로직을 만든다.

- Executor에는 성공을 나타낼 때 쓰는 resolve라는 콜백함수와 실패를 나타낼 때 쓰는 reject가 있다.

 

const promise = new Promise((resolve, reject) => {
}); 
출력값 => promise{pending}

const promise = new Promise((resolve, reject) => { 
	reject("failed"); 
}); 
출력값 => promise{<rejected>: "failed"}

const promise = new Promise((resolve, reject) => { 
	resolve("success"); 
}); 
출력값 => promise{<fulfilled>: "success"}

Promise 호출방법

1. then()

- Promise 상태가 Fulfilled 상태일 때 쓰는 메서드

const promise = new Promise((resolve, reject) => { 
	resolve(); 
}); 

promise.then(() => console.log("성공: success")); 
출력값 => 성공: success

2.catch()

- Promise 상태가 Rejected 상태일 때 쓰는 메서드

const promise = new Promise((resolve, reject) => { 
	reject(); 
}); 

promise.catch(() => console.log("실패: failed")); 
출력값 => 실패: failed

3.finally()

- Promise 상태의 상관없이 출력하고 싶은 값이 있을경우, 사용하는 메서드

- 단 Pending 상태에서는 불가능

const promise = new Promise((resolve, reject) => { 
	resolve(); 
	reject(); 
}); 
promise .then(() => console.log("성공: success"))
	.catch(() => console.log("실패: failed")) 
	.finally(() => console.log("어떤상태이든 상관없이 출력"); 
출력값 => 성공: success 어떤상태이든 상관없이 출력

 

여기서 알 수 있는 사실이 있는데 promise는 resolve, reject 둘 다 호출할 경우, 먼저 호출한 값에 의해 상태가 결정이 된다는 것이다.

※ if문으로 조건을 주면 성공일때 resolve, 실패일때 reject를 쓸 수 있다.

​

Async?

- Promise를 더욱 간편하게 쓸 수 있는 syntatic sugar 이다.

async function msg() { 
	return "hi"; 
}; 
출력값 => promise{<fulfilled> "hi"}

※ 함수 앞에 async를 붙이면 해당 함수는 promise 타입을 가지게 된다.

※ Syntatic sugar => 기존에 존재하는 것을 감싸서 더욱 편리하게 쓸 수 있게 도와주는 것

​

Await?

- async가 붙은 함수에서만 사용 가능하다.

- promise 타입이 처리가 될 때까지 기다린다.

function delay(ms) { 
	return new Promise((resolve) => setTimeout((resolve,ms)); 
} 

async function result() { 
	await delay(1000); 
	return 100; 
} 

result().then((a) => console.log(a)); 
출력값 => 1초 뒤에 100출력

promise 타입에 시간이 걸리도록 setTimeout 함수를 이용하여 정해진 시간 뒤에 100을 출력하도록 코드를 구현해 보았다.

await을 써 promise의 setTimeout 함수의 동작이 다 끝나면 retrun 100을 출력하도록 하였다.

​

만약에 await delay(1000)을 안쓰고 delay(1000) 만 썼을 때는 어떻게 동작할까?

그럴경우 1초를 기다리지 않고 바로 100을 출력을 하는 것을 알 수 있었다.

​

그러므로 await 은 Promise 타입의 데이터가 클 경우 await을 써 데이터가 전부 받아와진 다음에 그 다음 구문을 실행하도록 하여야 한다.