Axios 인터셉터 Axios 인터셉터를 사용한 글로벌 HTTP 요청 및 응답 처리

이것은 모든Axios HTTP 요청, 응답 및 오류를 잡는 방법에 대한 짧은 예입니다. 캐칭은 interceptors 이라는 Axios 기능으로 구현됩니다. 요청이 전송되기 전에 모든 요청을 포착하고 수정할 수 있습니다. 또한 응답 및 오류는 전역적으로 포착될 수 있습니다. 예를 들어, 인터셉터는 요청이 전송되기 전에 요청 헤더를 수정하거나 일종의 전역 오류 처리 시스템을 구현하려는 경우에 유용합니다.

물론 실제 사용 사례의 경우 모든 요청과 응답을 같은 방식으로 처리하기에는 너무 일반적일 수 있습니다. 그렇기 때문에 각 HTTP 요청에 대해 전역 처리를 비활성화하는 구성 옵션도 있습니다.

데모는 CodePen에서 사용할 수 있습니다.

데모에서는 HTTP 요청이 완료될 때 알림을 표시하기 위해 VanillaToasts 라이브러리를 사용했습니다.

Axios 설치

지침에 따라 installing Axios 시작합니다.

새 항목instance을 만들고 사용해야 하는 전역 구성 옵션을 추가합니다.

const axiosInstance = axios.create({
  baseURL: 'https://...'
})

HTTP 요청 핸들러를 구성 가능하게 만들기

전역 핸들러를 사용해야 하는지 여부를 확인하는 isHandlerEnabled 함수를 추가합니다. 여기에서 추가 사용자 정의 논리를 구현할 수도 있습니다. 예를 들어 특정 HTTP 응답 코드에 대해서만 핸들러를 활성화합니다.

const isHandlerEnabled = (config={}) => {
  return config.hasOwnProperty('handlerEnabled') && !config.handlerEnabled ? 
    false : true
}

이제 원하는 경우 나중에 개별 HTTP 호출에 대한 처리기를 비활성화할 수 있습니다.

await axiosInstance.get('/v2/api-endpoint', { handlerEnabled: false })

Axios 요청 인터셉터

요청 핸들러 추가

요청 처리기의 일반적인 사용 사례 중 하나는 새 HTTP 헤더를 수정하거나 추가하는 것입니다. 예를 들어 인증 토큰을 모든 요청에 ​​주입할 수 있습니다.

const requestHandler = (request) => {
  if (isHandlerEnabled(request)) {
    // Modify request here
    request.headers['X-CodePen'] = 'https://codepen.io/teroauralinna/full/vPvKWe'
  }
  return request
}

요청 인터셉터 활성화

axiosInstance.interceptors.request.use(
  request => requestHandler(request)
)

Axios 응답 및 오류 인터셉터

응답 핸들러 추가

const errorHandler = (error) => {
  if (isHandlerEnabled(error.config)) {
    // Handle errors
  }
  return Promise.reject({ ...error })
}

const successHandler = (response) => {
  if (isHandlerEnabled(response.config)) {
    // Handle responses
  }
  return response
}

인터셉터 활성화

axiosInstance.interceptors.response.use(
  response => successHandler(response),
  error => errorHandler(error)
)

이제 Axios의 모든 요청은 우리가 정의한 핸들러를 사용합니다.


이 블로그 게시물은 원래 Auralinna.blog에 게시되었습니다.