JavaScript에서 API 요청을 중단하는 방법

다른 이유; 사용자 자격 증명을 인증하고, 리소스를 가져오고, 리소스를 생성하는 등의 작업을 수행합니다.

JavaScript에서 API 요청을 중단할 수 있다는 것을 알고 계셨습니까? 중단이란 요청이 완료되기 전에(응답을 받기 전 또는 요청이 서버에 도달하기 전에) 요청을 취소하는 것을 의미합니다.

이 작업을 수행하려는 데는 여러 가지 이유가 있습니다. 그 중 하나는 사용자가 이미 요청한 페이지에서 다른 곳으로 이동한 경우 요청이 서버로 전송되지 않도록 하는 것입니다.

요청을 취소하면 불필요한 네트워크 트래픽을 피하고 메모리 사용량과 리소스를 절약하며 성능을 향상하는 데 도움이 될 수 있습니다.

JavaScript에서 API 요청을 만드는 방법에는 여러 가지가 있습니다. 이 기사에서는 fetch 및 axios 에 중점을 둘 것입니다.

그렇다면 이러한 메서드에서 중단 요청을 어떻게 수행합니까?

AbortController 인터페이스

웹 API는 원할 때마다 요청을 중단할 수 있는 JavaScript 개체인 인터페이스AbortController를 노출합니다. AbortController 개체를 만드는 방법은 다음과 같습니다.

const controller = new AbortController()

이controller 개체에는 요청 중단을 위한 두 가지 중요한 속성이 있습니다.

첫 번째 속성은 signal 객체입니다. 이 개체는 요청에 대한 고유 식별자입니다. 이 객체의 구조는 다음과 같습니다.

{
  // other properties
  aborted: false,
  onabort: null
}

두 번째 속성은 abort()라는 메서드입니다. 이 메서드는 고유한 요청 신호의 플래그aborted를 업데이트하는 데 사용됩니다. 이 메소드가 호출되면 signals 객체의 모든 관찰자에게 알림이 전송되고 요청이 취소됩니다.

애플리케이션의 어느 시점에서든 abortRequest 함수가 호출되면(예: 버튼 클릭 이벤트) abort 메서드가 호출되고 abortSignal 객체가 업데이트되며 모든 관찰자에게 알립니다.

이제 fetch 및 axios 에서 이것을 사용하는 방법을 살펴보겠습니다.

Fetch에서 API 요청 중단

fetch 메서드는 API 요청을 만드는 데 사용되는 JavaScript 함수입니다. API 끝점의 URL과 요청 옵션을 포함하는 개체의 두 가지 인수를 사용합니다.

fetch(api, requestOptions)

requestOptions 객체는 많은 속성을 허용하지만 가장 중요한 것은 signal 속성입니다. 그런 다음 컨트롤러의 signal 개체를 이 속성에 연결할 수 있습니다.

const controller = new AbortController()

const abortSignal = controller.signal

function abortRequest() {
  controller.abort()
}

fetch("api", {
  signal: abortSignal,
})

이를 통해 abortRequest 함수가 호출되면 fetch 표현식을 알리고 요청을 취소합니다.

Axios에서 API 요청 중단

Axios는 API 요청을 만드는 데 사용되는 JavaScript 라이브러리입니다. fetch 메서드와 구문이 매우 비슷합니다. 또한 요청 옵션 개체에서 signal 속성을 허용합니다. 따라서 다음과 같이 컨트롤러에서 signal 개체를 연결할 수도 있습니다.

const controller = new AbortController()

const abortSignal = controller.signal

function abortRequest() {
  controller.abort()
}

axios.get("api", {
  signal: abortSignal,
})

aborted 객체의 signal 플래그가 true 로 업데이트되면 이 axios 표현식에 알림이 전송되고 요청이 취소됩니다.

API 요청을 만드는 새로운 방법의 경우에도 요청 옵션 개체에서 signal 속성을 수락하여 abort() 메서드를 사용하여 요청을 중단할 수 있습니다.