[Javascript] Promise 이해하기

Promise란

비동기 함수가 반환하는 객체이다. 콜백을 직접 호출하지 않고 Promise를 통해 콜백을 호출한다. Promise를 통해 비동기 함수를 쉽게 처리할 수 있다.

Promise의 3가지 상태

• 대기 상태(Pending) : 비동기 함수가 아직 실행되지 않음

• 성공 상태(Fulfilled) : 비동기 함수가 성공적으로 실행됨

• 거부 상태(rejected) : 비동기 함수의 실행을 실패함

Promise 객체는 대기 상태로 존재하다가 성공 상태가 되면 resolve() 함수를 호출하여 성공에 대한 코드를 실행하고, 실패 상태가 되면 reject() 함수를 호출하여 실패에 대한 코드를 실행한다.

Promise 객체 예시

const promise = new Promise((resolve, reject) =>{
  setTimeout(() => {
  	resolve(10 + 20);
  }, 1000)
})

// resolve의 인수로 제공된 10 + 20은 then()가 호출될 때 파라미터로 제공된다.
promise.then((value) =>{
	console.log(value);
}).catch((error) => {
	console.log(error);
})

---

fetch() 사용하기

url을 통해 Promise 객체 형태로 response를 받아오는 함수이다. 이를 JSON형태로 바꿔서 출력할 수 있다.

이 때 비동기 처리를 하기 위해서는 함수에 async를 붙이고 함수 내부에서 await를 Promise 객체 앞에 사용해야 한다.

Promise 객체 앞에 await를 사용하게 되면 Promise의 상태가 fulfilled 혹은 failed가 될 때까지 대기한다. -> Promise 객체의 값을 가져오기 위해서는 await가 필요하다.

await는 async 함수 내부에서만 사용 가능하다.

async 함수 내에서 await를 만나게 되면 함수 외부의 코드를 실행하다가 Promise 객체가 fulfilled 혹은 rejected 상태가 되면 다시 함수 내부로 돌아와 코드를 실행한다.

const response = fetch("https://learn.codeit.kr/api/menus");
console.log(response); // 출력 결과 : Promise {<Pending>}

// JSON 형태로 출력하기
async function getMenus() {
	const response = await fetch("https://learn.codeit.kr/api/menus");
	const data = await response.json();
	return data;
}

console.log(await getMenus());

---

then() 사용하기

then 함수는 Promise 객체가 fulfilled 상태가 되면 then 함수 내부의 콜백 함수를 실행한다.

-> then 함수도 항상 Promise 객체를 리턴한다.

-> 콜백이 Promise를 리턴할 경우 그대로 Promise를 리턴하고, 일반적인 값을 리턴할 경우 이 값을 결과값으로 갖는 Promise를 리턴한다.

fetch('https://learn.codeit.krrrr/api/employees')
	.then((response) => response.json())
	.then((data) => console.log(data))
	.catch((error) => console.log(error))
	.finally(() => console.log("finished"));

---

Promise.all()

여러 Promise를 동시에 기다릴 때 사용한다.

인자로 전달된 모든 Promise가 fulfilled 상태가 되면 Promise.all()이 리턴하는 Promise도 fulfilled 상태가 된다.

인자로 전달된 Promise 중 하나라도 rejected 상태가 되면 Promise.all()이 리턴하는 Promise도 rejected 상태가 된다.

async function getEmployees() {
  try {
    const response = await fetch('https://learn.codeit.kr/api/employees');
    const employees = await response.json();
    return employees;
  } catch (error) {
    console.log('데이터를 가져오지 못했습니다 :(');
    return null;
  }
}
  async function getMenus() {
  try {
    const response = await fetch('https://learn.codeit.kr/api/menus');
    const menus = await response.json();
    return menus;
  } catch (error) {
    console.log('데이터를 가져오지 못했습니다 :(');
    return null;
  }
}

const employeesPromise = getEmployees();
const menusPromise = getMenus();

const [employees, menus] = await Promise.all([employeesPromise, menusPromise]);

console.log('직원 데이터:');
console.log(employees);
console.log('메뉴 데이터:');
console.log(menus);