4.1 ํค์๋ async
JavaScript์์ ๋น๋๊ธฐ ํจ์๋ ๋น๋๊ธฐ ์ฝ๋๋ฅผ ๋๊ธฐ ์ฝ๋์ฒ๋ผ ์ธ ์ ์๊ฒ ํด์ค. ECMAScript 2017 (ES8)์์ ๋์
๋ async
์ await
ํค์๋๋ ํ๋ก๋ฏธ์ค๋ฅผ ๋ค๋ฃจ๊ธฐ ์ฝ๊ฒ ํด์ฃผ๊ณ ์ฝ๋๋ฅผ ๋ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋ง๋ค์ด์ค.
์ฃผ์ ๊ฐ๋
ํจ์ ์ ์ธ ์์ async
ํค์๋๋ฅผ ๋ถ์ด๋ฉด ๊ทธ ํจ์๊ฐ ๋น๋๊ธฐ ํจ์๊ฐ ๋ผ. ๋น๋๊ธฐ ํจ์๋ ํญ์ ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํด, return
๋ฌธ์ด ์์ด๋ ๋ง์ฐฌ๊ฐ์ง์ผ. ํจ์๊ฐ ๊ฐ์ ๋ฐํํ๋ฉด ๊ทธ ๊ฐ์ด ์๋์ผ๋ก ํ๋ก๋ฏธ์ค๋ก ๊ฐ์ธ์ ธ์ ๋ฐํ๋ผ.
๋ฌธ๋ฒ:
async function name() {
// ํจ์ ์ฝ๋
}
์์ :
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // ์ถ๋ ฅ: Hello, world!
});
4.2 ํค์๋ await
await
ํค์๋๋ ๋น๋๊ธฐ ํจ์ ์์์ ํ๋ก๋ฏธ์ค๊ฐ ์ดํ๋ ๋๊น์ง ์คํ์ ๋ฉ์ถ๊ฒ ํด์ค. await
๋ async
ํค์๋๋ก ์ ์ธ๋ ํจ์ ์์์๋ง ์ฌ์ฉํ ์ ์์ด.
๋ฌธ๋ฒ:
let result = await
promise;
์์ :
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // ์ถ๋ ฅ: Hello, world! 2์ด ํ
}
displayGreeting();
4.3 async์ await์ ์ฌ์ฉ ์์
์์ 1: ์ฌ๋ฌ ํ๋ก๋ฏธ์ค๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋น๋๊ธฐ ํจ์
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // ์ถ๋ ฅ: Data 1 (1์ด ํ)
const data2 = await fetchData2();
console.log(data2); // ์ถ๋ ฅ: Data 2 (2์ด ํ)
}
fetchAllData();
์์ 2: ๋น๋๊ธฐ ์์ ์ ๋ณ๋ ฌ ์คํ
์ฌ๋ฌ ๋น๋๊ธฐ ์์
์ ๋ณ๋ ฌ๋ก ์คํํ๋ ค๋ฉด Promise.all()
์ await
์ ํจ๊ป ์ฌ์ฉํ ์ ์์ด.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // ์ถ๋ ฅ: Data 1 (2์ด ํ)
console.log(data2); // ์ถ๋ ฅ: Data 2 (2์ด ํ)
}
fetchAllData();
์์ 3: try...catch๋ฅผ ์ฌ์ฉํ ์๋ฌ ์ฒ๋ฆฌ
๋น๋๊ธฐ ํจ์๋ try...catch
๋ธ๋ก์ ์ฌ์ฉํ์ฌ ์๋ฌ๋ฅผ ์ฒ๋ฆฌํ ์ ์์ด, ์ด๊ฑธ๋ก ์ฝ๋๊ฐ ๋ ์ฝ๊ธฐ ์ฌ์์ ธ.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // ์ถ๋ ฅ: Error: Error occurred (1์ด ํ)
}
}
fetchData();
์์ 4: ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ async์ await
๋น๋๊ธฐ ํจ์๋ ํด๋์ค์ ๋ฉ์๋ ์์์๋ ์ฌ์ฉํ ์ ์์ด.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // ์ถ๋ ฅ: Fetched Data (1์ด ํ)
});
์์ 5: ๋น๋๊ธฐ ์ดํฐ๋ ์ดํฐ
๋น๋๊ธฐ ์ดํฐ๋ ์ดํฐ๋ ๋น๋๊ธฐ๋ก ๋ฐ์ดํฐ๋ฅผ ์คํธ๋ฆฌ๋ฐํ๋ ๋ฐ ์ ์ฉํด.
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // ์ถ๋ ฅ: 0, 1, 2 (1์ด ๊ฐ๊ฒฉ)
}
}
iterateAsyncGenerator();
GO TO FULL VERSION