JavaScript에서 HTTP 가져오기 요청을 어떻게 중단할 수 있나요?

취소로 HTTP 가져오기 요청 중단

JavaScript에 fetch()가 도입되면서 HTTP 요청 처리에 혁명이 발생하여 다양하고 직관적인 인터페이스가 제공됩니다. 그러나 이러한 요청을 조기에 종료할 수 있는 가능성에 대한 우려가 종종 제기됩니다.

fetch()의 중단 메커니즘

2017년 9월 현재 fetch()에는 신호 매개변수 지원이라는 중요한 개선 사항이 포함되었습니다. . 이 매개변수를 사용하면 개발자는 AbortController 및 해당 AbortSignal을 사용하여 요청을 취소할 수 있습니다. 처음에는 브라우저 지원이 제한되었지만 현재(2020년 3월 기준) 대부분의 주요 브라우저(Edge, Firefox, Chrome, Safari, Opera 등)에서 이 기능을 완전히 수용합니다.

구현

취소 절차는 4단계로 구성됩니다.

1. AbortController:

const controller = new AbortController()

2. AbortSignal 획득:

const signal = controller.signal

3. 신호 전달 fetch():

fetch(urlToFetch, {
    method: 'get',
    signal: signal,
})

4. 원할 때마다 요청을 중단합니다.

controller.abort();

예

어떻게 작동하는지 설명하려면 연습하려면 다음 예를 고려하세요.

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

/*
// Register a listenr.
signal.addEventListener("abort", () => {
    console.log("aborted!")
})
*/


function beginFetching() {
    console.log('Now fetching');
    var urlToFetch = "https://httpbin.org/delay/3";

    fetch(urlToFetch, {
            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.
    controller.abort()
}

호출하여 Controller.abort(), 요청은 언제든지 중단될 수 있습니다.

위 내용은 JavaScript에서 HTTP 가져오기 요청을 어떻게 중단할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!