Promise, Async/Await

  [ promise란? ]  

 

: 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.

promise는 함수에 콜백을 전달하는 대신에 콜백을 첨부하는 방식의 객체입니다.

 

비동기 음성 파일을 생성하는 함수가 있다고 가정했을 때 해당 함수는 음성 설정에 대한 정보를 받고,

두 가지 콜백 함수(함수의 인자로 들어간 함수)를 받습니다.

하나는 음성 파일이 성공적으로 생성되었을 때 실행되는 콜백, 그리고 다른 하나는 에러가 발생 했을 때 실행하는 콜백입니다.

function successCallback(result) {
  console.log("Audio file ready at URL: " + result);
}

function failureCallback(error) {
  console.log("Error generating audio file: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

모던한 함수들은 위와 같이 콜백들을 전달하지 않고 콜백을 붙여 사용할 수 있게 promise를 반환해줍니다.

 

만약 함수가 Promise를 반환 해주도록 수정한다면 다음과 같이 간단하게 사용할 수 있습니다.

new Promise((resolve, reject) => { 
	console.log('시작'); 
	resolve(); 
}) 
.then(() => { 
	throw new Error('문제 발생'); 
	console.log('실행1'); 
}) 
.catch(() => { 
	console.log('문제 해결'); 
}) 
.then(() => { 
	console.log('실행2'); 
});

이와 같은 방식을 비동기 함수 호출이라고 합니다.

 

프로미스(Promise)를 사용하면 Callback Hell에서 벗어날 수 있습니다.

---

  [ async/await이란? ]  

 

: 비동기 처리 패턴 중 하나입니다. (그 외에 콜백, 프로미스가 있습니다.)

비동기 처리 패턴 중에서 프로미스가 콜백 지옥을 해결 했다지만 여전히 코드가 길어지고 읽기 좋은 코드라고 볼 수 없습니다.

(then과 catch가 계속 반복 되기 때문에)

 

그래서 등장한 것이 async/awiat입니다.

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 프로미스를 사용한 코드를 한번 더 깔끔하게 줄일 수 있습니다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

1) 함수의 앞에 async라는 예약어를 붙인다.

2) 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await을 붙인다.

 

여기서 주의 해야 할 점은 비동기 처리 메소드가 꼭 프로미스 객체를 반환해야 await가 정상적으로 동작한다는 것입니다.

일반적으로 await의 대상에는 프로미스 객체를 반환하는 API(Application Programming Interface) 호출 함수 등이 있습니다.

promise에서 예외 처리를 할 때. catch를 사용했던 것처럼

 

async/await에서는 예외를 처리 할 때 try/catch문을 사용합니다.

---

[javascript 자바스크립트] async/await 란?

Using promises - JavaScript | MDN

Javascript - Promise를 사용해서 Callback hell을 벗어나자