async/await 개요
async/await 패턴은 es8에서 도입되었는데 es6에서 표준화된 Promise 패턴으로도 불편함이 있었고 이 불편함을 해소하기 위해서 async/await 패턴이 도입되었다. 따라서 반드시 Promise 패턴을 알고 있어야 한다.
async/await 에서 사용되는 몇가지 규칙은 다음과 같다.
- async를 함수 앞에 붙이면 비동기 함수가 된다.
- await 는 반드시 async와 같이 사용되어야 한다.
- await 뒤에는 반드시 Promise 객체가 와야 한다.
- await는 Promise 객체의 비동기 작업이 끝날때까지 동기방식처럼 blocking 되어서 기다렸다가 작업이 끝나면 그 결과를 리턴한다.
- async를 앞에 붙인 함수는resolved 된 Promise를 리턴하므로 만일 결과를 받아서 사용할려면 .then()으로 결과를 받아서 처리할 수 있다.
Quiz
Q: 1초마다 순차적으로 A, B, C를 출력하는 비동기 작업을 async/await 문장으로 수정하시오.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
new Promise(resolve => { setTimeout(() => { resolve('A'); }, 1000); }).then(data => { console.log(data); return new Promise(resolve => { setTimeout(() => { resolve('B'); }, 1000) }) }).then(data => { console.log(data); return new Promise(resolve => { setTimeout(() => { resolve('C'); }, 1000) }) }).then(data => console.log(data)); |
먼저 await 뒤에는 Promise 가 와야 하고 동기식으로 blocking해서 기다렸다가 결과가 리턴되면 그 결과를 받아서 리턴하므로 아래와 같이 작성한다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const data1 = await new Promise(resolve => { setTimeout(() => { resolve('A'); }, 1000); }); console.log(data1); const data2 = await new Promise(resolve => { setTimeout(() => { resolve('B'); }, 1000) }); console.log(data2); const data3 = await new Promise(resolve => { setTimeout(() => { resolve('C'); }, 1000) }); console.log(data3); |
await는 async 없이는 존재할 수 없으므로 전체를 함수로 감싸고 앞에 async를 붙인다. 그러면 함수는 비동기 함수가 된다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
async function print() { const data1 = await new Promise(resolve => { setTimeout(() => { resolve('A'); }, 1000); }); console.log(data1); const data2 = await new Promise(resolve => { setTimeout(() => { resolve('B'); }, 1000) }); console.log(data2); const data3 = await new Promise(resolve => { setTimeout(() => { resolve('C'); }, 1000) }); console.log(data3); } print(); |
CodePen
See the Pen xxxedVz by LeeDongKee (@eastflag) on CodePen.default