[JavaScript] Promise / async / awiat

Promise

• 자바스크립트의 비동기 처리에 사용되는 객체로, 동기식 처리처럼 작업의 순서에 따른 실행을 가능하게 합니다.
• 자바스크립트에서 비동기 처리를 동기 처리로 할 수 있게 하는 Bulit-in(미리 내부적으로 정의된)객체

new Promise(executor);

// 예제 화살표 함수
new Promise((resolve, reject) => { //명령문 });

• Promise 생성자 인터페이스 executor에는 함수만 올 수 있으며 인자로 resolve, reject가 주입됩니다.
• executor는 Promise의 실행 함수라고 불리고, Promise가 만들어질 때 자동으로 실행됩니다. Promise가 연산을 언제 종료하는지 상관하지 않고, resolve, reject 중 하나를 무조건 호출해야합니다.

Promise의 상태

• 대기(Pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(Fulfilled): 연산이 성공적으로 완료됨.
• 거부(Rejected): 연산이 실패함.

• Fulfilled Promise(풀필드 프로미스) : executor가 실행되어 resolve된 promise

const timerPromise = new Promise((resolve, reject) => { // 이곳에 정의된 함수가 executor
  setTimeout(() => {
	  console.log('First');
		resolve();
	}, 1000);
});

// 이 시점에서 timerPromise는 Fulfilled Promise라고 부를 수 있다.

timerPromise.then(() => {
	console.log('Middle');
	console.log('Last');
});

// Print: First
// Middle
// Last

then : resolve가 실행된 경우 then 메소드에 작성된 함수가 실행된다.

const resolvePromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('First');
    resolve('Resolve!'); // resolve를 실행할 때, 안에 데이터를 넣어줄 수 있습니다.
  }, 1000);
});

resolvePromise.then((data) => {
  console.log('Middle');
  console.log('Last');
  console.log(data);
})

// Print: First -> 1초 뒤에 출력됩니다.
// Middle
// Last
// Resolve!

catch : 에러를 throw 하거나 reject가 실행되면 catch 메소드에 작성된 함수가 실행된다.

const errorPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
	  console.log('First');
		reject('Error!!'); // 직접 reject를 실행하면 프로미스에서 에러가 발생한것으로 간주됩니다.
	}, 1000);
});

errorPromise.then(() => {
	console.log('Middle');
	console.log('Last');
}).catch((error) => {
	console.log('에러 발생!', error);
});

// Print: '에러 발생! Error!!'

async/await

자바스크립트의 async/await는 ES8에서 추가된 문법으로 promise를 좀 더 편하게 사용하게 해주는 문법입니다.

async 함수

function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환합니다.

// 비동기 + 일반 함수
async function 함수이름() {
	// 명령문
}

// 비동기 + 익명 함수
async function() {
  // 명령문
}

// 비동기 + 화살표 함수
async () => {
	// 명령문
}

await

• await는 async 함수 내에서만 사용할 수 있습니다.
• await 를 사용하면 promise가 fulfill 상태가 되거나 rejected 될 때까지 함수의 실행을 중단하고 기다릴 수 있습니다.
• promise의 연산이 끝나면 함수에서 반환한 값을 얻을 수 있습니다.

async function 함수이름() {
	const result = await 'Test!';
	console.log(result);
}

함수이름();
// Print: 'Test!';