Axios 인터셉터를 사용하여 API 오류 응답을 처리하는 방법

최신 웹 애플리케이션을 구축할 때 API 호출 및 응답을 처리하는 것은 개발의 중요한 부분입니다. 널리 사용되는 JavaScript 라이브러리인 Axios는 HTTP 요청 작성을 단순화할 뿐만 아니라 개발자가 보다 간편하고 효율적인 방식으로 응답과 오류를 관리할 수 있게 해주는 인터셉터와 같은 기능도 내장되어 있습니다.

이 기사에서는 Axios 인터셉터를 사용하여 API 오류 응답을 효과적으로 처리하여 전체 애플리케이션에서 오류 처리를 표준화하는 방법에 중점을 둘 것입니다.

액시오스(Axios)란 무엇입니까?

Axios는 API에 요청하기 위한 async/await 구문을 지원하는 JavaScript용 약속 기반 HTTP 클라이언트입니다. 사용이 간편하고 인터셉터를 통해 쉽게 기능을 확장할 수 있어 인기가 높습니다.

Axios 기본 예:

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

이 예에서는 .then 및 .catch를 사용하여 요청 및 오류를 처리하는 방법을 보여 주지만 인터셉터를 사용하면 여러 API 요청을 관리해야 할 때 코드를 더욱 효율적으로 만들 수 있습니다.

Axios 인터셉터란 무엇입니까?

Axios 인터셉터는 요청과 응답이 .then 또는 .catch로 처리되기 전에 이를 가로채서 처리할 수 있게 해주는 함수입니다. 이는 모든 요청에 ​​공통 구성을 적용하거나 통일된 방식으로 오류 응답을 처리해야 할 때 특히 유용합니다.

인터셉터에는 두 가지 주요 유형이 있습니다.

1. 요청 인터셉터: 헤더, 토큰 또는 기타 구성을 요청을 전송하기 전에 수정하거나 추가하는 데 사용됩니다.
2. 응답 인터셉터: 필요한 경우 요청 로깅 또는 재시도를 포함하여 전역적으로 응답 또는 오류를 처리하는 데 사용됩니다.

응답 인터셉터를 사용하는 이유는 무엇입니까?

여러 API 엔드포인트를 처리할 때 각각은 서로 다른 유형의 오류 메시지나 상태 코드를 반환할 수 있습니다. 인터셉터가 없으면 개별 API 호출마다 오류를 처리해야 하므로 코드가 반복적이고 유지 관리가 불가능해질 수 있습니다.

응답 인터셉터를 사용하면 모든 오류 응답을 한 곳에서 관리할 수 있으므로 앱 전체에서 오류를 처리하는 일관된 접근 방식을 보장할 수 있습니다.

Axios 응답 인터셉터 설정

1. 액시오스 설치

먼저 프로젝트에 Axios가 설치되어 있는지 확인하세요.

npm install axios

2. Axios 인스턴스 생성

인터셉터를 설정하려면 앱 전체에서 재사용할 수 있는 Axios 인스턴스를 생성하는 것이 가장 좋습니다. 이는 요청 및 응답 처리를 표준화하는 데 도움이 됩니다.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

3. 응답 인터셉터 추가

개별 API 호출에서 오류가 .then 또는 .catch 블록에 도달하기 전에 오류를 포착하고 처리하기 위해 응답 인터셉터를 추가할 수 있습니다.

npm install axios

4. API 호출하기

인터셉터가 준비되면 이제 API 호출에 apiClient를 사용할 수 있습니다. 오류가 발생하면 인터셉터가 자동으로 잡아서 처리합니다.

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',  // Replace with your API base URL
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

이 설정에서는 모든 단일 API 호출에 대해 오류 처리 코드를 작성할 필요가 없습니다. 인터셉터는 이 논리를 중앙 집중화하여 API 호출을 더 깔끔하고 유지 관리하기 쉽게 만듭니다.

---

Axios 인터셉터의 실제 사용 사례

1. 자동 토큰 새로고침

API가 인증 토큰(예: JWT)을 사용하는 경우 토큰이 만료되어 새로 고쳐야 하는 상황이 발생할 수 있습니다. 401 Unauthorized 응답이 수신되면 Axios 인터셉터를 사용하여 토큰을 자동으로 새로 고칠 수 있습니다.

apiClient.interceptors.response.use(
  (response) => {
    // If the response is successful (status code 2xx), return the response data
    return response;
  },
  (error) => {
    // Handle errors globally
    if (error.response) {
      // Server responded with a status code out of 2xx range
      const statusCode = error.response.status;
      const errorMessage = error.response.data.message || 'An error occurred';

      // Handle different status codes accordingly
      if (statusCode === 401) {
        // Handle unauthorized error, for example by redirecting to login
        console.error('Unauthorized access - redirecting to login');
      } else if (statusCode === 500) {
        // Handle server errors
        console.error('Server error - try again later');
      } else {
        // Handle other types of errors
        console.error(`Error ${statusCode}: ${errorMessage}`);
      }
    } else if (error.request) {
      // No response received (network error, timeout, etc.)
      console.error('Network error - check your internet connection');
    } else {
      // Something else happened during the request
      console.error('Request error:', error.message);
    }

    // Optionally, return a rejected promise to ensure `.catch` is triggered in individual requests
    return Promise.reject(error);
  }
);

2. 네트워크 오류 처리

앱이 외부 API에 의존하는 경우 네트워크 문제가 일반적인 문제가 될 수 있습니다. Axios 인터셉터는 네트워크 장애 발생 시 사용자에게 친숙한 오류 메시지를 제공하는 데 도움이 됩니다.

// Example API call
apiClient.get('/users')
  .then(response => {
    console.log('User data:', response.data);
  })
  .catch(error => {
    // This will be triggered if the error isn't handled by the interceptor
    console.error('Error fetching users:', error);
  });

---

Axios 인터셉터 사용의 이점

1. 중앙 집중식 오류 처리: 모든 API 호출에 대해 오류 처리 코드를 작성하는 대신 한 곳에서 오류를 처리할 수 있습니다.

2. 클리너 코드: 인터셉터가 오류 처리를 처리하므로 개별 API 호출이 더 깔끔하고 간결해집니다.

3. 유지관리성 향상: 오류 처리 변경(예: 새로운 사례 추가 또는 오류 메시지 수정)을 한 곳에서 수행할 수 있으므로 코드베이스를 더 쉽게 유지 관리할 수 있습니다.

4. 일관성: 인터셉터는 오류 처리에 대한 일관된 접근 방식을 보장하므로 예외적인 사례 누락이나 중복 코드 작성에 대해 걱정할 필요가 없습니다.

---

결론

API 오류 응답을 처리하기 위해 Axios 인터셉터를 사용하면 코드의 구조, 유지 관리성 및 일관성이 크게 향상될 수 있습니다. 오류 처리 논리를 중앙 집중화하면 API 호출을 더욱 효율적으로 만들고 애플리케이션 전체에서 반복적인 코드를 줄일 수 있습니다.

인터셉터는 토큰 새로 고침 관리부터 네트워크 장애 시 사용자에게 친숙한 오류 메시지 표시까지 광범위한 사용 사례에 사용할 수 있는 Axios의 강력한 기능입니다. 지금 Axios 인터셉터를 활용하여 오류 처리를 단순화하고 애플리케이션의 복원력을 향상시키십시오!

위 내용은 Axios 인터셉터를 사용하여 API 오류 응답을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!