[Vue] Vue2에서 Axios와 함께 Async/Await 사용하기

Vue 2에서 Axios를 사용하여 비동기 API 호출을 처리할 때 Async/Await를 사용하는 방법은 다음과 같습니다.

1. 설치

먼저 Vue와 Axios를 설치해야 합니다. 아직 설치하지 않았다면 다음 명령어를 사용하여 설치하십시오.

npm install vue axios

 

2. 기본 사용법

다음은 Async/Await를 사용하여 API 호출을 수행하고 응답 데이터를 콘솔에 로깅하는 간단한 예제입니다.

<template>
  <div>
    <button @click="getData">데이터 가져오기</button>
    <p v-if="data">이름: {{ data.name }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async getData() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users/1');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

3. 오류 처리

위 예제에서는 try...catch 블록을 사용하여 API 호출 중 발생하는 오류를 처리합니다. 오류가 발생하면 catch 블록 내의 코드가 실행되고 오류 내용이 콘솔에 출력됩니다.

4. 여러 API 호출

Async/Await를 사용하여 여러 API 호출을 순차적으로 수행할 수 있습니다. 다음 예제에서는 두 개의 API 호출을 순차적으로 수행하고 두 응답 데이터를 사용하여 계산을 수행합니다.

<template>
  <div>
    <p>합계: {{ total }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      total: 0
    };
  },
  methods: {
    async getData() {
      try {
        const response1 = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
        const response2 = await axios.get('https://jsonplaceholder.typicode.com/todos/2');

        this.total = response1.data.id + response2.data.id;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

5. 주의 사항

• Async/Await는 항상 async 함수 내에서만 사용해야 합니다.
• await 키워드는 비동기 작업이 완료될 때까지 코드 실행을 일시 중단합니다.
• 오류 처리를 위해 항상 try...catch 블록을 사용하십시오.

 

async/await를 활용한 다양한 함수 호출 예시

async/await는 비동기 작업을 동기적인 코드처럼 작성할 수 있도록 도와주는 자바스크립트의 강력한 기능입니다. 이를 통해 코드 가독성을 높이고, 비동기 처리에 따른 복잡성을 줄일 수 있습니다.

기본적인 예시

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error   
  })

 

 

• async 함수: fetchData 함수는 async 키워드로 선언되어 비동기 함수임을 나타냅니다.
• await: await 키워드는 fetch 함수와 response.json() 메서드의 결과를 기다립니다.
• Promise: fetch 함수는 Promise를 반환하며, await는 Promise가 해결될 때까지 실행을 멈추고 결과값을 반환합니다.

다양한 예시

1. 동시에 여러 비동기 작업 수행

async function fetchDataConcurrently() {
  const promise1 = fetch('https://api.example.com/data1');
  const promise2 = fetch('https://api.example.com/data2');

  const [data1, data2] = await Promise.all([promise1, promise2])
  
  return { data1, data2 };
}

 

• Promise.all: 여러 Promise를 배열로 묶어 모든 Promise가 해결되거나 거부될 때까지 기다립니다.

2. 에러 처리

JavaScript

async function fetchDataWithErrorHandling() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
   }
   	  const data = await response.json();
  	  return data;
   } catch (error) {
     console.error('Error fetching data:',error)
  }
}

 

• try...catch: 에러 발생 시 catch 블록에서 처리합니다.

3. 타임아웃 설정

function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchDataWithTimeout() {
  try {
    const data = await Promise.race([
      fetch('https://api.example.com/data'),
      timeout(2000) // 2초 후에 타임아웃
    ]);
    return data;
  } catch (error) {
    console.error('Request timed out');
  }
}

• Promise.race: 가장 먼저 해결되거나 거부되는 Promise의 결과를 반환합니다.

4. 비동기 함수 내에서 다른 비동기 함수 호출

JavaScript

async function fetchDataAndProcess() {
  const data = await fetchData();
  const processedData = await processData(data);
  return processedData;
}

async/await의 장점

• 간결한 코드: 동기적인 코드처럼 자연스럽게 작성할 수 있습니다.
• 향상된 가독성: then 체인보다 코드 흐름을 파악하기 쉽습니다.
• 오류 처리: try...catch 블록을 사용하여 에러를 효과적으로 처리할 수 있습니다.

주의 사항

• async 함수 내부에서만 사용: await 키워드는 반드시 async 함수 내에서만 사용해야 합니다.
• 비동기 작업에 적합: 동기적인 작업에는 사용하지 않는 것이 좋습니다.