javascript 심화 5 (Promise, async, await)

 

Promise란 📖

Promise는 비동기 작업의 결과에 대한 상태를 나타내는 객체입니다.

 

아래 예시에서 new 연산자로 Promise의 인자로 넘어가는 콜백은 바로 실행됩니다. 내부에서 비동기 작업이 완료될 때 `resolve()`를 호출합니다.

new Promise(function (resolve) {
  setTimeout(function () {
    var name = '에스프레소';
    console.log(name);
    resolve(name);
  }, 500);
})

 

 Promise 상태

`대기(Pending)` : 비동기 함수가 아직 시작하지 않은 상태

`성공(Fulfilled)` : 비동기 함수가 성공적으로 완료된 상태

`실패(Rejected)` : 비동기 함수가 실패한 상태

 

Promise가 대기 상태에서 상태가 바뀌면 `then()`,`catch()` 메서드를 사용해 성공, 실패 상태의 Promise를 각각 처리할 수 있습니다.

// requestBuy가 Promise를 반환한다고 가정

func.requestBuy({
  orderId: "t9JI0Bs1SVdJxRs8yjiQJ",
  orderName: "티셔츠",
})
.then(function (data) {
  console.log(data);
	// 성공 처리
})
.catch(function (error) {
  console.log(error.message);
    // 에러 처리
})

 

 

하지만 Promise에도 콜백 함수와 비슷한 문제가 생길 수 있습니다. `then()` 메서드의 체인을 길게 이어나가면 콜백 체인과 마찬가지로 유지보수와 가독성이 떨어지고 에러를 찾기가 힘들어집니다.

 

❗여기서 `async`와`await`로 콜백, Promise 체인의 단점을 보완할 수 있습니다.

 

async, await 📖

ES7에 추가된 비동기 처리 방식 중 하나입니다.`async`와`await`를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 좋아지고 에러 처리가 간단해집니다.

 

사용 방법

비동기 작업을 수행하고자 하는 함수 앞에 `async` 키워드를 붙이고 함수 내부에서 비동기 작업이 필요한 위치에 `await` 키워드를 붙여주면 됩니다.

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

 

`async` 함수 getData()를 정의하고 `await`를 사용해 fetch() 메서드를 기다리고 데이터를 반환하는 코드입니다.

 

❗`await` 키워드는 Promise 객체가 완료될 때까지 기다리고 에러가 발생하면 catch문으로 제어가 넘어가기 때문에 try-catch문 안에서 에러를 핸들링할 수 있습니다!

 

요약 📖

• Promise는 비동기 작업 결과에 대한 상태를 반환하는 객체
  • then(), catch() 메서드로 성공, 실패 상태의 Promise를 처리할 수 있다.
• 콜백지옥의 단점을 보완하기 위해 async, await 키워드를 사용할 수 있다.
• 비동기를 수행하는 함수 앞에 async 키워드를 붙이고 비동기 작업이 필요한 위치에 await 키워드를 사용하면 비동기 코드를 동기 코드처럼 보이게 할 수 있다.

안뇽~!😄

---

출처 🏷️

https://docs.tosspayments.com/blog/async-await-example