async/await을 사용하면 프로미스 후속 처리 메서드 없이
동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다.
즉 async/await는 여러 프로미스의 동작을 동기스럽게 사용할 수 있게 하고,
어떠한 동작을 여러 프로미스의 그룹에서 간단하게 동작하게 하는 것이다.
- async 함수는 항상 프로미스를 반환한다.
- 이 프로미스는 함수의 실행이 완료되면 해당 값을 resolve 한다.
- async 함수에는 await 표현식이 포함될 수 있다.
- try catch 문을 사용하여 에러처리를 효과적으로 할 수 있다.
(사용하지 않을 경우 에러를 reject 하는 프로미스를 반환한다.)
- await 표현식은 async 함수 내에서만 사용할 수 있다.
- 자바스크립트는 await 키워드를 만나면 프로미스가 처리될 때까지 기다린다.
- await 표현식은 프로미스가 처리(resolve 또는 reject)될 때까지 async 함수의 실행을 일시 중지한다.
- 프로미스가 성공적으로 처리되면(fulfill) 해당 값을 반환하고 이어 실행된다.
- 에러가 발생할 경우(reject) 해당 에러를 throw하고 async함수가 중단 될 수 있다.
- await 표현식을 사용해 비동기 작업을 동기적으로 처리할 수 있다.
let slow_func = function () {
console.log("START slow promise");
return new Promise((resolve) => {
setTimeout(function () {
resolve("3000");
console.log("DONE slow promise");
}, 3000);
});
};
let fast_func = function () {
console.log("START fast promise");
return new Promise((resolve) => {
setTimeout(function () {
resolve("1000");
console.log("DONE fast promise");
}, 1000);
});
};let sequential = async function () {
console.log("==== 순차적 시작 ====");
const slow = await slow_func();
console.log(slow);
const fast = await fast_func();
console.log(fast);
};
sequential();
// ==== 순차적 시작 ====
// START slow promise
// Promise {<pending>}
// DONE slow promise
// 3000
// START fast promise
// DONE fast promise
// 1000let concurrent_await = async function () {
console.log("==== await으로 동시 시작 ====");
const slow = slow_func();
const fast = fast_func();
console.log(await slow);
console.log(await fast);
};
concurrent_await();
// ==== await으로 동시 시작 ====
// START slow promise
// START fast promise
// Promise {<pending>}
// DONE fast promise
// DONE slow promise
// 3000
// 1000
// await 키워드로 프로미스가 완료될 때까지 기다리도록 되어 있음
// 때문에 DONE fast promise, DONE slow promise는 프로미스 완료에 따라 출력되지만
// promise 결과 값은 await의 영향으로 3000, 1000 순서로 출력됨. let concurrent_all = function () {
console.log("==== Promise.all로 동시 시작 ====");
Promise.all([slow_func(), fast_func()]).then(
// Promise.all - 배열 내의 모든 프로미스가 해결될 때까지 기다림
// 모든 프로미스가 해결되면 .then() 메서드를 사용하여 messages 배열을 받는 콜백 함수 실행
(messages) => {
console.log(messages[0]); // slow_func
console.log(messages[1]); // fast_func
},
);
};
concurrent_all();
// ==== Promise.all로 동시 시작 ====
// START slow promise
// START fast promise
// Promise {<pending>}
// DONE fast promise
// DONE slow promise
// 3000
// 1000
// async/await을 사용하여 동시 시작 코드를 작성하는 것이 보다 가독성이 좋은 것을 확인할 수 있음.