[TIL] Promise, async/await

오늘 처음 배운 개념과 문법은 아니지만 오늘 처음 '제대로' 알게 된 사실들이 있어서 짧게 정리(...) + 볼드 처리 해보았다.

 

Promise

let promise = new Promise((res, rej) => {
	// executor
    // res()
    // rej()
    });

- 프로미스 객체에 전달되는 executor 함수는 프로미스 객체가 생성될 때 자동으로 즉각 실행된다.

- 해야할 일들이 이 함수 내부에서 처리되고 -> 그 결과에 따라 자바스크립트가 제공하는 콜백인 resolve 혹은 reject가 호출한다.

- resolve, reject는 하나의 인수만 받고 나머지는 전부 무시

- 처리된 settled 프로미스에 resolve, reject를 호출해도 무시

 

then, catch, finally 메서드

promise.then(
	(res) => { /* 결과 핸들링 */ },
    	(err) => { /* 에러 핸들링 */ }
)

- .then(resultHandlingFunction, errorHandlingFunction) : then은 두 개의 함수를 인수로 받을 수 있고, 각각 실행 결과와 에러를 매개변수로 받는다. (then에서도 에러 처리가 된다는 점 !)

- .catch(errorHandlingFunction) = .then(null, errorHandlingFunction)

new Promise((res, rej) => {
	/* executor */
    })
    .finally(() => { /* 프로미스 이행되면 무조건 실행 */ })
    .then((res) => /* 결과 처리 */)
    .catch((err) => /* 에러 처리 */);

- finally(f) : 보통 절차 마무리하는 '보편적' 동작 수행

- 프로미스 이행 결과를 알 수 없으므로 (!) 따로 인수를 안 받는다.

- 자동으로 다음 핸들러에 결과, 에러는 통과 ~ 시키고 그냥 넘겨줌 (finally 무조건 마지막에 배치해야 한다고 생각했는데 아니었음)

 

async/await

사실 직접 코드를 작성할 때는 promise를 쓰는 경우가 거의 없고, async/await로 비동기 처리를 한다. 그런데 async/await가 마치 동기처럼 비동기 처리를 하다보니 쓰면서 가끔씩 작동 방식이 헷갈릴 때가 있어서 이번에 문서 다시 읽어봤다.

async 함수

내부에서 await를 사용하는지와 상관없이 async 함수는 항상 프로미스를 반환한다. 프로미스가 아닌 값을 반환하는 경우에는 이행 상태의 프로미스로 감싸서 이행된 프로미스를 반환시킨다. 그래서 .then 메서드를 사용할 수 있다.

await

async 함수 내부에 await 키워드가 있으면 프로미스가 처리될 때 까지 기다린다. (내가 동기적 문법으로 인식되는 부분)

이 await에서 프로미스가 처리될 때, 계속 다른 코드는 실행되지 않고 blocking 되는 게 아닌가 헷갈리는데 "프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다."라고 설명되어있다. 사실 async/await가 promise.then에 대한 syntax sugar라는 점만 확실하게 기억하면 헷갈릴 일이 없을 듯.

예전에 서로 다른 결과값을 받는, 서로 다른 성격의 프로미스를 하나의 async 함수에서 같이 처리한 적이 있는데 (이렇게 설명하니까 정말 끔찍한 일을 저지른 것 같음) 지금 생각하니 async/await가 작동하는 방식은 대충 알아도 promise에 대해서 충분히 이해하지 못했던 것 같다. 

 

async 함수를 사용할 때 .then이 필요한 케이스

async 함수 바깥의 최상위 레벨 코드에서는 await를 사용할 수 없다. 이 경우에는 f( ).catch( ... ) 이렇게 처리.

 

 

async/await 편하게 쓰고는 있지만 promise와의 관련성을 제대로 알고 있어야 정확히 사용할 수 있겠다는 생각...

 

 

---

https://ko.javascript.info/async