JavaScript에서 진행 중인 'fetch()' 요청을 어떻게 취소할 수 있나요?

Inflight HTTP fetch() 요청 취소

JavaScript에서 요청을 작성하기 위한 fetch() API의 출현으로 인해 취소 메커니즘에 대한 의문이 제기되었습니다. - 항공편 요청. 역사적으로 내장된 옵션은 없었습니다. 그러나 최근 업데이트에는 요청 취소 경로가 도입되었습니다.

AbortController 사용

2017년 9월 20일부터 fetch()는 이제 신호 매개변수를 지원하여 AbortController와 결합합니다. 다음 단계에서는 프로세스를 간략하게 설명합니다.

1. AbortController 개체 만들기:

   • const Controller = new AbortController()

2. AbortController 가져오기 signal:

   • const signal = Controller.signal

3. 신호를 fetch()에 전달:

   • fetch (urlToFetch, { 메소드: 'get', 신호: 신호 })

4. 필요한 경우 요청을 중단하세요.

   • controller.abort()

사용 예

다음을 고려하세요 예(Firefox 57과 호환 가능):

// Create an AbortController instance.
const controller = new AbortController();
const signal = controller.signal;

function beginFetching() {
  console.log('Now fetching');
  fetch("https://httpbin.org/delay/3", {
    method: 'get',
    signal: signal,
  })
  .then(function(response) {
    console.log(`Fetch complete. (Not aborted)`);
  })
  .catch(function(err) {
    console.error(` Err: ${err}`);
  });
}

function abortFetching() {
  console.log('Now aborting');
  // Abort the request.
  controller.abort();
}

이 예에서 "시작" 버튼을 클릭하면 요청이 시작되고, "중단" 버튼을 누르면 완료되기 전에 요청이 종료됩니다.

위 내용은 JavaScript에서 진행 중인 'fetch()' 요청을 어떻게 취소할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!