async함수와 await 표현식의 간단 개념정리

async 함수

async 함수는 비동기로 실행되는 함수이다.
종전의 Promise API를 따르는 것에 비해 일반적인 동기 함수를 사용하는 것과 유사한 방법으로 비동기 로직을 처리할 수 있도록 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 1초 뒤 v를 값으로 Fulfilled 되는 Promise를 반환한다.
const p = v => {
return new Promise(
resolve => {
setTimeout(
() => resolve(v),
1000
)
}
)
};

// 종전의 방식 : then이나 catch 메서드를 이용해 콜백을 줄줄이 등록하는 방식
p(1)
.then(v => {
console.log(v);
return p(2);
})
.then(v => {
console.log(v);
return p(3);
});

// async 함수 사용 : 일반적인 동기 함수와 다를 바 없는 사용법.
const main = async () => {
console.log(await p(1));
console.log(await p(2));
};

main();

위 두 코드는 모두 같은 동작을 한다.

async 함수는 실행결과를 반환하기 위해 내부적으로 Promise 객체를 사용한다.

1
2
3
4
5
6
7
8
const foo = async () => {
return 123;
};

console.log(foo); // 출력 : Promise {<pending>}

foo()
.then(v => console.log(v)); // 출력 : 123

아래와 같은 형태로 실행된다.

1
2
3
const foo = () => {
return Promise.resolve(123);
};

await 표현식

await는 async 함수 내에서만 사용이 가능하며, 아래와 같이 사용한다.

1
await [Promise를 반환하는 표현식]

await는 지정된 Promise가 Fulfilled 될 때까지 async 함수의 실행을 일시정지 시킨다. (generator와 흡사하다)

그리고 전체 await 표현식이 해당 Promise의 Fulfilled된 결과값으로 평가된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const foo = () => {
return new Promise(
resolve => {
setTimeout(
() => resolve(123), // 1초 뒤 123으로 이행됨.
1000
)
}
)
};

const main = async () => {
console.log("main함수가 실행되었다");
const result = await foo(); // p()가 반환하는 Promise가 1초 뒤 이행될 때까지 중지.
console.log(result); // 이행된 Promise의 결과값이 result에 할당되었다. 출력 : 123
};

main();
console.log("안녕하신가요");

/*
출력 :
main함수가 실행되었다
안녕하신가요
123
*/

만약, await 뒤에 따라오는 표현식이 Promise로 평가되지 않는다면, 해당 표현식이 평가된 값으로 이행된 Promise로 변환이 된다.

1
2
3
4
const main = async () => {
const result = await 123; // await Promise.resolve(123) 으로 변환됨.
console.log(result);
};

Promise가 Fulfilled 되지 않고 Rejected 될 경우 해당 Promise의 결과값을 throw 한다.

따라서, catch 메서드를 통해 에러처리를 위한 콜백을 전달하던 종전의 방식과 달리 try-catch 구문을 활용할 수 있게 된다.

1
2
3
4
5
6
7
8
9
const foo = async () => {
try {
await Promise.reject(123);
} catch (e) {
console.log(e); // 출력 : 123
}
};

foo();
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×