[Javascript] Promise와 async/await

Promise란?

비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체
비동기 작업을 감싸는 객체

• 비동기 작업 실행
• 비동기 작업 상태 관리
• 비동기 작업 결과 저장

Promise의 상태

대기 (Pending): 아직 작업이 완료되지 않은 상태
성공 (Fulfilled): 비동기 작업이 성공적으로 마무리 된 상태
실패 (Rejected): 비동기 작업이 실패한 상태

const promise = ((resolve, reject) => {
	//executor
  	setTimeout(()=>{
    	const num = 10;
      	
      	if (typeof num === 10){
        	resolve(num+10);
        } else {
        	reject('숫자가 아닙니다.');
        }
    }, 2000);
})

then, catch

promise
	.then((value) => { // resolve인 경우 실행
		console.log(value);
	})
	.catch((error) => { // reject인 경우 실행
		console.log(error);
	})
          

async/await

async

• 어떤 함수를 비동기적으로 동작하게 만들어주는 키워드
• 그 함수가 Promise를 반환하도록 함

await

• async 함수 내부에서만 사용 가능한 키워드
• 비동기 함수의 결과값을 동기로 동작하는 함수처럼 받을 수 있음

async function getData() {
	return {
    	name: 'minjyo',
      	color: yellow 
    }
}

왜 비동기 함수들을 다시 동기적으로 처리하는가?

자바스크립트에는 fetch, setTimeout, setInterval과 같은 내장 또는 외장 비동기 함수들이 존재한다. 이 비동기 함수들의 결과값을 바로 가져다 쓰고 싶을 때가 있다.
예를 들어 서버에서 어떤 값을 가져와서 그 이후에 어떤 작업을 수행하고 싶을 때 (= 동기적 수행), 비동기 함수들은 비동기적으로 동작하기 때문에 이를 동기적으로 처리하지 어렵다.
따라서 그럴 때 async, await같은 키워드를 이용해 동기적 처리를 할 수 있다.

출처
[인프런] 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지