CodeGym /ํ–‰๋™ /Frontend SELF KO /๋น„๋™๊ธฐ ํ•จ์ˆ˜

๋น„๋™๊ธฐ ํ•จ์ˆ˜

Frontend SELF KO
๋ ˆ๋ฒจ 43 , ๋ ˆ์Šจ 3
์‚ฌ์šฉ ๊ฐ€๋Šฅ

4.1 ํ‚ค์›Œ๋“œ async

JavaScript์—์„œ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ๋™๊ธฐ ์ฝ”๋“œ์ฒ˜๋Ÿผ ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜. ECMAScript 2017 (ES8)์—์„œ ๋„์ž…๋œ async์™€ await ํ‚ค์›Œ๋“œ๋Š” ํ”„๋กœ๋ฏธ์Šค๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์‰ฝ๊ฒŒ ํ•ด์ฃผ๊ณ  ์ฝ”๋“œ๋ฅผ ๋” ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ค˜.

์ฃผ์š” ๊ฐœ๋…

ํ•จ์ˆ˜ ์„ ์–ธ ์•ž์— async ํ‚ค์›Œ๋“œ๋ฅผ ๋ถ™์ด๋ฉด ๊ทธ ํ•จ์ˆ˜๊ฐ€ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๊ฐ€ ๋ผ. ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” ํ•ญ์ƒ ํ”„๋กœ๋ฏธ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•ด, return ๋ฌธ์ด ์—†์–ด๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์•ผ. ํ•จ์ˆ˜๊ฐ€ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋ฉด ๊ทธ ๊ฐ’์ด ์ž๋™์œผ๋กœ ํ”„๋กœ๋ฏธ์Šค๋กœ ๊ฐ์‹ธ์ ธ์„œ ๋ฐ˜ํ™˜๋ผ.

๋ฌธ๋ฒ•:

    
      async function name() {
        // ํ•จ์ˆ˜ ์ฝ”๋“œ
      }
    
  

์˜ˆ์ œ:

JavaScript
    
      async function greet() {
        return 'Hello, world!';
      }

      greet().then((message) => {
        console.log(message); // ์ถœ๋ ฅ: Hello, world!
      });
    
  

4.2 ํ‚ค์›Œ๋“œ await

await ํ‚ค์›Œ๋“œ๋Š” ๋น„๋™๊ธฐ ํ•จ์ˆ˜ ์•ˆ์—์„œ ํ”„๋กœ๋ฏธ์Šค๊ฐ€ ์ดํ–‰๋  ๋•Œ๊นŒ์ง€ ์‹คํ–‰์„ ๋ฉˆ์ถ”๊ฒŒ ํ•ด์ค˜. await๋Š” async ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ๋œ ํ•จ์ˆ˜ ์•ˆ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด.

๋ฌธ๋ฒ•:

    
      let result = await
      promise;
    
  

์˜ˆ์ œ:

JavaScript
    
      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: ์—ฌ๋Ÿฌ ํ”„๋กœ๋ฏธ์Šค๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๋Š” ๋น„๋™๊ธฐ ํ•จ์ˆ˜

JavaScript
    
      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์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด.

JavaScript
    
      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 ๋ธ”๋ก์„ ์‚ฌ์šฉํ•˜์—ฌ ์—๋Ÿฌ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด, ์ด๊ฑธ๋กœ ์ฝ”๋“œ๊ฐ€ ๋” ์ฝ๊ธฐ ์‰ฌ์›Œ์ ธ.

JavaScript
    
      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

๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” ํด๋ž˜์Šค์˜ ๋ฉ”์†Œ๋“œ ์•ˆ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด.

JavaScript
    
      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: ๋น„๋™๊ธฐ ์ดํ„ฐ๋ ˆ์ดํ„ฐ

๋น„๋™๊ธฐ ์ดํ„ฐ๋ ˆ์ดํ„ฐ๋Š” ๋น„๋™๊ธฐ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ŠคํŠธ๋ฆฌ๋ฐํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ด.

JavaScript
    
      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();
    
  
1
ะžะฟั€ะพั
๋น„๋™๊ธฐ์„ฑ,ย  43 ัƒั€ะพะฒะตะฝัŒ,ย  3 ะปะตะบั†ะธั
ะฝะตะดะพัั‚ัƒะฟะตะฝ
๋น„๋™๊ธฐ์„ฑ
๋น„๋™๊ธฐ์„ฑ
์ฝ”๋ฉ˜ํŠธ
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION