Promise 와 Async / Await

Promise

사전적의미 : 약속
JavaScript에서의 의미 : 비동기 작업을 처리하는데 사용되는 객체
쉽게말하면 ? 어떤 작업을 처리하고 결과를 알려줘~

promise함수는 new키워드와 생성자 함수를 사용해서 생성할 수 있다. 생성할때는 인자로 콜백함수를 넣을 수 있는데 이러한 콜백함수 안에서 우리가 처리해야할 비동기 코드를 작성한다. 사용자에게 특정 text를 입력받아서 정상적인 text일경우에는 약속을 이행하고 정상적이지 않을때는 약속을 거부한다.
비동기 함수가

• resolve :정상적일때 값을 반환을 해주는 함수 (이행)
• reject : 정상적이지 않았던 값을 반환 (거부)
• reslove함수와 reject함수의 파라미터는 다시 콜백함수의 파라미터로 넘겨준것이다.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 처리
  setTimeout(() => {
    const text = prompt ('"hello"를 입력해줘 ! 그러면 선물을 줄게! ');
    if (text === 'hello'){
      resove('👍');
    } else {
      reject('error message!');
    }
  }, 2000)
});

상태

• 대기(pending) : 비동기 작업을 처리하는 중
• 이행(fulfilled) : 비동기 작업이 정상적으로 처리된 경우
• 거부(rejected) : 비동기 작업이 정상적으로 처리되지 않은 경우

myPromise
	.then((result) => {
		console.log('result: ', result)
})
	.catch((err) => {
  		console.log('err: ', err)
})
	.finally(() => {
  		console.log('finally~!')
})

메소드

• then() : 이행되었을 때
• catch() : 거부되었을 때
• finally() : 이행되거나 거부되더라도 항상 !

Async / Await

async와 await는 ES2017(ECMAScript 8)부터 추가된 자바스크립트의 비동기 처리 방식 중 하나이다. async와 await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어, 가독성이 좋아지고 에러 처리가 간단해진다.

async는 함수의 앞에 붙여서 해당 함수가 비동기 함수임을 나타내며, await는 비동기 함수의 실행 결과를 기다리는 키워드이다. async 함수 안에서 await 키워드를 사용하면, 해당 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하고 결과를 기다린 다음, 해당 결과를 반환한다.

async function getData() {
  const response = await fetch('/api');
  const data = await response.json();
  return data;
}

해당 함수는 async 함수 getData를 정의하고, fetch 함수를 사용하여 URL에서 데이터를 가져오고, 해당 데이터를 JSON으로 파싱하는 작업을 비동기적으로 수행한다. await를 사용하여 fetch와 json() 메서드를 기다리고, 데이터를 반환한다.

async function getData() {
  try {
    const response = await fetch('/api');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

await 키워드는 Promise 객체가 완료될 때까지 코드 실행을 일시 중지하므로, try-catch 블록 안에서 사용하여 에러 처리를 할 수 있다. fetch에서 네트워크 에러가 발생할 경우, await 이후의 코드는 실행되지 않으며, catch 블록으로 제어가 넘어가 에러를 처리할 수 있다.