[Vue] Vue3에서 setup() 함수와 함께 Axios와 Async/Await 사용하기

Vue3에서 setup() 함수와 함께 Axios를 사용하여 비동기 API 호출을 처리하는 방법은 다음과 같습니다.

1. 설치

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

npm install vue axios

2. 기본 사용법

다음은 setup() 함수, Async/Await를 사용하여 API 호출을 수행하고 응답 데이터를 반환하는 간단한 예제입니다.

<script setup>
import axios from 'axios';

const getData = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users/1');
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

const user = await getData();
console.log(user.name); // 'Leanne Graham'
</script>

3. 오류 처리

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

4. 여러 API 호출

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

<script setup>
import axios from 'axios';

const getData = async () => {
  try {
    const response1 = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    const response2 = await axios.get('https://jsonplaceholder.typicode.com/todos/2');

    return response1.data.id + response2.data.id;
  } catch (error) {
    console.error(error);
  }
};

const total = await getData();
console.log(total); // 3
</script>

5. 주의 사항

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