[typescript] REST API 호출 시 응답 데이터 처리 방법
REST API를 호출하고 해당 API에서 반환된 응답 데이터를 처리해야 하는 경우가 많습니다. 이번 블로그에서는 TypeScript를 사용하여 REST API 응답 데이터를 처리하는 방법에 대해 알아보겠습니다.
Contents
1. Axios를 사용한 REST API 호출
Axios는 HTTP 클라이언트 라이브러리로, REST API를 호출하는 데 매우 유용합니다. TypeScript 프로젝트에 Axios를 설치하고 REST API를 호출하는 방법에 대해 간단히 알아보겠습니다.
import axios from 'axios';
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
return response.data;
} catch (error) {
throw new Error(error.message);
}
}
// fetchData 함수를 호출하여 API 데이터를 가져옴
fetchData()
.then(data => {
console.log('API 응답 데이터:', data);
})
.catch(error => {
console.error('API 호출 중 오류 발생:', error);
});
위 코드에서 axios.get을 사용하여 REST API를 호출하고, response.data를 통해 응답 데이터에 접근합니다. 또한, catch 블록을 사용하여 API 호출 중 발생한 에러를 처리합니다.
2. 응답 데이터 처리
a. JSON 형식 데이터 처리
REST API가 JSON 형식의 데이터를 반환하는 경우, TypeScript에서는 해당 데이터를 다음과 같이 처리할 수 있습니다.
interface ApiResponse {
id: number;
name: string;
// 기타 필드
}
async function fetchData() {
try {
const response = await axios.get<ApiResponse>('https://api.example.com/data');
const data = response.data;
return data;
} catch (error) {
throw new Error(error.message);
}
}
위 코드에서 axios.get의 제네릭 타입으로 ApiResponse 인터페이스를 지정하여, API 응답 데이터의 타입을 명시합니다.
b. 에러 처리
API 호출 중 발생한 에러를 처리하는 방법은 다음과 같습니다.
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
const data = response.data;
return data;
} catch (error) {
if (error.response) {
// 서버에서 응답한 상태 코드가 2xx가 아닌 경우
console.error('서버 응답 오류:', error.response.data);
} else if (error.request) {
// 요청이 전달되지 않은 경우
console.error('요청 오류:', error.request);
} else {
console.error('API 호출 중 오류 발생:', error.message);
}
throw new Error('API 호출 중 오류 발생');
}
}
위 코드에서 error.response, error.request를 통해 서버 응답 오류와 요청 오류를 처리하고, 그 외의 경우에는 API 호출 중 발생한 일반적인 오류를 처리합니다.
이제 TypeScript를 사용하여 REST API 응답 데이터를 처리하는 방법에 대해 알아보았습니다. API 호출 및 응답 데이터 처리 시 오류에 대한 적절한 처리는 반드시 고려되어야 합니다.