Vue3+TS+Vite 개발 기술: 백엔드 API와 상호작용하는 방법

Vue3+TS+Vite 개발 기술: 백엔드 API와 상호작용하는 방법

소개:
웹 애플리케이션 개발에서 프론트엔드와 백엔드 간의 데이터 상호작용은 매우 중요한 링크입니다. 널리 사용되는 프런트엔드 프레임워크인 Vue3에는 백엔드 API와 상호작용할 수 있는 다양한 방법이 있습니다. 이 기사에서는 Vue3 + TypeScript + Vite 개발 환경을 사용하여 백엔드 API와 상호 작용하는 방법을 소개하고 코드 예제를 통해 이해를 심화시킵니다.

1. Axios를 사용하여 요청 보내기
Axios는 브라우저 및 Node.js 환경에서의 사용을 지원하는 인기 있는 HTTP 요청 라이브러리입니다. 먼저 프로젝트에 Axios를 설치하고 필요한 곳에 도입해야 합니다.

예제 코드:

import axios from 'axios';

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`);
}

이 예에서는 userId 매개변수를 허용하고 Axios를 사용하여 백엔드 API의 /api/user/{userId}경로에 GET 요청을 보내는 fetchUserData 함수를 정의합니다. Axios는 Promise를 반환하고 then 메소드를 사용하여 반환된 데이터를 처리할 수 있습니다.

2. Fetch API를 사용하여 요청 보내기
Axios 외에도 JavaScript의 기본 Fetch API를 사용하여 요청을 보낼 수도 있습니다. Fetch API는 브라우저에서의 사용을 지원하는 XMLHttpRequest HTTP 요청 라이브러리의 현대적인 대안입니다.

샘플 코드:

export function fetchUserData(userId: number) {
  return fetch(`/api/user/${userId}`).then(res => res.json());
}

이 예에서는 Fetch API를 사용하여 GET 요청을 보내고 then 메서드를 통해 반환된 데이터를 처리합니다. Fetch API는 Promise를 반환하며 반환된 데이터를 구문 분석하려면 json 메서드를 사용해야 한다는 점에 유의해야 합니다.

3. 요청 처리 결과
일반적으로 백엔드 API에서 반환되는 데이터에는 성공과 실패라는 두 가지 상황이 있을 수 있습니다. 반환된 상태 코드를 기반으로 요청의 성공 여부를 확인하고 다른 결과를 처리해야 합니다.

샘플 코드:

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`).then(res => {
    if (res.status === 200) {
      // 请求成功
      return res.data;
    } else {
      // 请求失败
      throw new Error(res.statusText);
    }
  });
}

이 예에서는 Axios를 사용하여 GET 요청을 보내고 반환된 상태 코드를 판단합니다. 상태 코드가 200이면 요청이 성공했음을 의미하며 res.data를 통해 반환된 데이터를 얻을 수 있습니다. 상태 코드가 200이 아니면 요청이 실패했음을 의미하며 throw 문을 통해 오류가 발생할 수 있습니다.

4. 비동기/대기를 사용하여 요청 처리
then 메서드를 사용하여 Promise를 처리하는 것 외에도 ES2017에 도입된 비동기/대기 구문을 사용하여 요청을 처리할 수도 있습니다.

샘플 코드:

export async function fetchUserData(userId: number) {
  try {
    const res = await axios.get(`/api/user/${userId}`);
    if (res.status === 200) {
      return res.data;
    } else {
      throw new Error(res.statusText);
    }
  } catch (error) {
    console.error(error);
  }
}

이 예에서는 async/await 구문을 사용하여 비동기 요청을 처리합니다. 함수 앞에 async 키워드를 추가하면 함수 내부에서 Wait를 사용하여 Promise의 결과를 기다릴 수 있습니다. try-catch 문에서 Axios의 GET 요청을 기다리고 동일한 방식으로 반환된 결과를 처리하기 위해 Await를 사용할 수 있습니다.

결론:
이 기사에서는 Vue3 + TypeScript + Vite 개발 환경을 사용하여 백엔드 API와 상호 작용하는 방법을 소개하고 코드 예제를 통해 이해를 심화시킵니다. Axios 또는 Fetch API를 사용하여 요청을 보내고 반환된 상태 코드를 기반으로 요청 결과를 처리할 수 있습니다. 이 기사가 Vue3 개발에서 백엔드 API와 상호 작용하는 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 Vue3+TS+Vite 개발 기술: 백엔드 API와 상호작용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!