안녕하세요. 신기한 연구소입니다.
자바스크립트(javascript) promise에 대해 공부를 하고 포스팅을 했었습니다.
promise를 좀 더 쉽게 사용할 수 있는 방법이 있습니다.
자바스크립트(javascript)에서 지원하는 async/await입니다.
async와 await라고 하니 뭔가 어려워 보이기도 하는데요.
사실 사용 방법은 엄청 간단합니다.
그럼 하나씩 예제를 통해 사용법을 알아봅니다.
1. async
async는 자바스크립트(javascript) 키워드입니다.
보통 async function(함수)라고 쓰인 경우가 있는데 그 이유는 바로 async는 함수를 선언하는 function 앞에 붙여서 사용하기 때문입니다.
|
1
2
3
|
async function myAsync() {
// coding...
}
|
cs |
function 앞에 async를 붙였습니다.
async 함수의 특징은 promise를 리턴합니다.
그렇다면 promise에서 사용하는 then()을 사용할 수 있다는 의미이기도 합니다.
|
1
2
3
4
5
6
7
|
function createPromise() {
return new Promise((resolve, reject) => {
resolve('success!!');
});
}
createPromise().then((rtn) => console.log(rtn));
|
cs |
promise를 리턴하는 함수입니다.
resolve로 success!! 를 성공적으로 리턴하게 됩니다.
리턴된 값은 then을 사용해서 구현할 수 있습니다.
위 promise를 async로 바꾸어보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 1
async function myAsync() {
return('success!!');
}
myAsync().then((rtn) => {
console.log(rtn);
});
// 2
async function mySndAsync() {
return Promise.resolve('Wow!!');
}
mySndAsync().then((rtn) => {
return console.log(rtn);
})
|
cs |
1번과 2번 두 가지 방식으로 코딩을 해봤습니다.
1번을 보면 promise를 사용한 것 보도 엄청 간단하게 만들어졌습니다.
promise의 .then()을 그대로 사용하는 것을 보면 async funciton이 promise를 리턴하는 게 맞네요.
2번의 경우는 return시 Promise.resolve()를 사용해서 promise 명시적 지정 방식으로 리턴을 했습니다.
역시 사용법은 promise와 같에 .then을 이용했습니다.
Promise.resolve()를 어떤 경우에 사용하는지 궁금했는데 위 예제를 보니 이해가 되네요.
2. await
await 키워드는 단어 뜻대로 기다린다는 의미입니다.
자바스크립트(Javascript) 키워드로 async와 짝꿍으로 사용합니다.
await에 대해 아주 중요한 부분이 있습니다.
await는 반드시 async funciton 내에서만 사용할 수 있습니다.
promise가 생성되고 실행이 되는 동안 약간의 시간이 걸릴 수 있습니다. 보통 API 통신의 경우로 생각해 볼 수 있는데요.
결과가 와서 후처리를 해야 되는데 결과가 오기 전에 다음 소스로 진행이 되면 null이나 undefined 등 오류가 발생할 수 있습니다.
이런 경우 promise가 처리될 때까지 기다리라는 명령이 바로 await입니다. 역시 예제를 봐야 이해가 편합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
async function testAwait() {
var testPromise = new Promise((resolve, reject) => {
setTimeout(() => resolve("3nd OK!!"), 3000)
});
var rtn = await testPromise;
console.log(rtn);
}
testAwait();
|
cs |
6번 라인을 보면 키워드 await를 사용하고 있습니다.
async function testAwait 함수 내에서 사용하고 있습니다.
promise로 리턴된 testPromise 앞에서 await를 사용하고 있습니다.
이제 위 소스는 testPromise가 3초 동안 대기하고 '3nd OK!!'를 출력하도록
await로 결과가 올 때까지 대기시킵니다.
보통 promise로 대기하기 위해서는 then()을 사용합니다.
then() 내부에 화살표 함수를 사용해서 리턴 받는 방식이라 구현이 좀 필요하지만
await를 사용하면 간단하게 사용할 수 있겠군요.
다시 강조하지만 await는 async function 내부에서만 사용이 가능합니다.
보통 API 호출하고 결과를 기다리기 위해 await를 자주 사용할 듯합니다.
지금까지 자바스크립트(javascript)의 키워드인 async와 await의 사용에 대해 간단하게 알아봤습니다.
예외처리나 응용 사용방법 그리고 thenable 등에 대한 내용은 다음에 포스팅해 볼게요.
다들 즐거운 코딩 생활 하세요~~
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]모던 JavaScript 팁 모음. (1) | 2023.11.29 |
|---|---|
| [자바스크립트]Promise 쉽게 이해하기 편. 프라미스, then(), async (0) | 2023.05.07 |
| [자바스크립트]정규표현식 Quantifiers, 수량자 정규식 (0) | 2023.01.08 |
| [자바스크립트]정규표현식 어썰션, Assertions (0) | 2022.12.24 |
| [자바스크립트]정규표현식 문자 클래스, 캐릭터 클래스, Character classes (1) | 2022.12.11 |
