[Vue] - async & await

async와 await는 JavaScript의 비동기 프로그래밍을 더욱 직관적으로 작성할 수 있도록 도와주는 문법입니다. 자세히 설명드리겠습니다.

1. async 함수

• 정의: async 키워드를 함수 앞에 붙이면 해당 함수가 비동기 함수가 됩니다. 이 함수는 항상 Promise를 반환합니다. 만약 함수 내에서 명시적으로 Promise를 반환하지 않더라도, 함수의 반환값이 Promise.resolve()로 감싸져서 반환됩니다.
• 사용 예:

  async function example() {
      return 42;
  }
  
  example().then(result => {
      console.log(result); // 42
  });
  

  위 코드에서 example 함수는 42를 반환하지만, 실제로는 Promise 객체를 반환합니다.
  

2. await 키워드

• 정의: await는 Promise가 해결될 때까지 함수 실행을 일시 정지합니다. await를 사용하면 비동기 작업의 결과를 기다릴 수 있으며, 비동기 코드를 동기 코드처럼 작성할 수 있습니다.
• 사용 예:

  async function fetchData() {
      const result = await fetch('<https://api.example.com/data>');
      const data = await result.json();
      return data;
  }
  
  fetchData().then(data => {
      console.log(data); // API에서 가져온 데이터
  });
  

3. Vue.js에서의 활용

Vue.js에서 async와 await는 주로 API 호출 및 데이터 비동기 처리에 사용됩니다. 일반적으로 컴포넌트의 created 라이프사이클 훅이나 methods 내에서 사용할 수 있습니다.

예제 1: created 라이프사이클 훅에서 사용하기

<template>
  <div>
    <h1>데이터 목록</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
    };
  },
  async created() {
    try {
      const response = await axios.get('<https://api.example.com/items>');
      this.items = response.data; // API에서 받은 데이터를 items에 저장
    } catch (error) {
      console.error('데이터를 가져오는 중 오류 발생:', error);
    }
  },
};
</script>

4. 오류 처리

비동기 코드에서 오류를 처리하는 것은 매우 중요합니다. try...catch 블록을 사용하여 await하는 동안 발생할 수 있는 오류를 잡을 수 있습니다. 위의 예제에서도 try...catch를 사용하여 오류를 처리하는 방법을 보여주고 있습니다.

5. 병렬 처리

때로는 여러 비동기 작업을 병렬로 처리해야 할 때가 있습니다. 이럴 경우 Promise.all()을 사용하여 여러 개의 Promise를 동시에 처리할 수 있습니다.

async function fetchMultipleData() {
    try {
        const [data1, data2] = await Promise.all([
            axios.get('<https://api.example.com/data1>'),
            axios.get('<https://api.example.com/data2>'),
        ]);
        console.log(data1.data, data2.data);
    } catch (error) {
        console.error('데이터를 가져오는 중 오류 발생:', error);
    }
}

fetchMultipleData();

요약

• async 함수는 비동기 작업을 처리하며 항상 Promise를 반환합니다.
• await는 Promise가 해결될 때까지 기다리며, 비동기 코드를 동기 코드처럼 작성할 수 있게 해줍니다.
• Vue.js에서 주로 API 호출이나 데이터 처리에 사용되며, 오류 처리를 위해 try...catch를 활용할 수 있습니다.
• 여러 비동기 작업을 병렬로 처리할 때는 Promise.all()을 사용하여 효율성을 높일 수 있습니다.

이러한 방식으로 async와 await를 사용하면 비동기 코드를 훨씬 더 읽기 쉽고 관리하기 쉽게 만들 수 있습니다.