하나의 작업만 수행할 수 있는 자바스크립트의 단점을 보완하기 위한 함수.
비동기 함수를 이용하면 특정 코드의 처리가 끝날 때까지 다음 코드가 기다리지 않아도 되며
특정 코드는 다른 곳 (aka 이벤트 루프)에서 실행된 후 반환된다.
fetchURL(url1, function (response1) {
fetchURL(url2, function (response2) {
fetchURL(url3, function (response3) {
console.log(1);
});
console.log(2);
});
console.log(3);
});
console.log(4);
// 로그
// 4
// 3
// 2
// 1
JS 초창기 비동기 함수를 구현할 때 사용하던 방식으로 하나 이상의 함수를 실행시킬 때 코드들이 중첩되어 있어 가독성이 떨어지고 실행 순서 역시 코드의 순서와 반대로 직관적으로 어려운 코드가 구현된다.
const page1Promise = fetch(url1);
page1Promise
.then((response1) => {
return fetch(url2);
})
.then((response2) => {
return fetch(url3);
})
.then((response3) => {
return fetch(url4);
})
.catch((err) => {});
콜백 함수의 문제를 해결하기 위해 ES2015부터 생긴 개념이다.
위 예제는 Promise Chaning으로 then()
을 이용해서 비동기 함수를 순차적으로 처리하여
코드의 중첩을 없애고 가독성을 높여 직관적으로 이해하기 수월해진걸 볼 수 있다.
async function fetchPages() {
try {
const response1 = await fetch(url1);
const response2 = await fetch(url2);
const response3 = await fetch(url3);
} catch (e) {}
}
ES2017부터 도입된 키워드로 Promise 함수를 간결하게 표현할 수 있는 함수다.
await는 각 코드가 resolve
를 반환할 때까지 대기하며 reject
반환 시 예외를 던져
미리 감싸놓은 try/catch
문을 이용하여 예외처리를 할 수 있다.
우리가 작성하는 코드는 항상 동기 또는 비동기로 실행된다.
이 때 두가지가 혼용되서는 안되는데 async는 항상 promise를 반환하므로 일관적으로 비동기 함수를 구현할 수 있도록 도와준다.
또한, Promise는 타입스크립트에서 중요한 기능 중 하나인 타입추론이 잘되기에
아래와 같이 async 함수를 사용하면 따로 리턴 타입을 명시하지 않아도 자동으로 타입이 추론된다.
// 리턴 타입을 명시하지 않아도 Promise<number>로 리턴 타입이 추론된다.
async function getNumber() {
return 42
}
// 화살표 함수에도 동일하게 적용이 가능하다.
const getNumber = async () => 42
const errorFunction = (promise) => {
try {
// 실제 비동기 함수가 실행되는 곳, 성공 시 첫번째 배열에만 값을 넣고 리턴한다.
const result = await promise;
return [result, null]
} catch (err) {
// 함수 실행 중 오류 발생 시 두번째 배열에만 에러내용을 넣고 리턴한다.
return [null, err ]
}
}
// 첫번째 배열에 값이 있으면 성공, 두번째 배열에 값이 있으면 에러가 난 것을 확인할 수 있다.
const [ prSuccess, prError ] = await errorFunction(promiseFunction)
if(prError) console.error(prError)