[typescript] 타입스크립트와 REST API 호출 시 미들웨어 사용 방법

12 Dec 2023

typescript

본 포스트에서는 타입스크립트(TypeScript)로 REST API를 호출하는 과정에서 미들웨어(middleware)를 적용하는 방법에 대해 알아보겠습니다.

미들웨어란?

미들웨어는 클라이언트 요청과 서버 응답 사이에서 동작하는 소프트웨어 혹은 프로그램입니다. REST API 호출 시에는 요청과 응답에 대한 처리를 미들웨어에서 수행할 수 있습니다.

axios를 이용한 REST API 호출

우선, 타입스크립트 환경에서 REST API를 호출하기 위해 axios를 사용해보겠습니다.

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

async function fetchData(url: string, config: AxiosRequestConfig): Promise<AxiosResponse> {
    try {
        const response: AxiosResponse = await axios.get(url, config);
        return response;
    } catch (error) {
        throw new Error(error);
    }
}

위 코드에서 fetchData 함수를 사용하여 REST API를 호출하는 것을 확인할 수 있습니다.

미들웨어 적용

이제, axios 인스턴스를 생성하여 미들웨어를 적용하는 방법을 살펴봅시다.

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 1000,
});

instance.interceptors.request.use((config: AxiosRequestConfig) => {
    // 요청 전 처리 작업 수행
    return config;
}, (error) => {
    return Promise.reject(error);
});

instance.interceptors.response.use((response: AxiosResponse) => {
    // 응답 후 처리 작업 수행
    return response;
}, (error) => {
    return Promise.reject(error);
});

async function fetchData(url: string, config: AxiosRequestConfig): Promise<AxiosResponse> {
    try {
        const response: AxiosResponse = await instance.get(url, config);
        return response;
    } catch (error) {
        throw new Error(error);
    }
}

위 코드에서 axios.create 메서드를 사용하여 axios의 인스턴스를 생성하고, interceptors를 이용하여 미들웨어를 적용한 것을 확인할 수 있습니다.

결론

본 포스트에서는 타입스크립트와 axios를 이용하여 REST API를 호출하는 과정에서 미들웨어를 적용하는 방법에 대해 알아보았습니다. 미들웨어를 적용함으로써 요청 전, 후에 처리할 작업을 쉽게 추가할 수 있습니다.

끝.

목차

미들웨어란?

axios를 이용한 REST API 호출

미들웨어 적용

결론