Fetch 및 AbortController를 사용하여 요청 시간 초과 구현

이것을 고려하십시오. 일부 외부 서비스에서 일부 데이터를 요청하는 웹 앱이 있고 n초 이상 걸리는 경우 요청을 취소하려고 합니다. 자바 스크립트를 사용하여 이것을 어떻게 구현합니까? 나는 당신을 얻었다

이것은 필요에 따라 수정할 수 있는 최종 스니펫입니다.

(async () => {

// we'll use to add dely/sleep logic
const timedOut = Symbol("Timeout")
const sleep= (delay) => new Promise((resolve, reject) => {
  setTimeout(resolve, delay, timedOut);
});

// the actual interface that we'd be using to cancel the request
const abortController = new AbortController();
const signal = abortController.signal;

// this is our external api call
// delay is added only to mock time-taking requests
const getData =async (signal,delay) => {
await sleep(delay)
return fetch("https://jsonplaceholder.typicode.com/todos/1",{
  signal
})
}

// promise.race returns whichever promise resolves first
const res = await Promise.race([
  sleep(3000),
  getData(signal,3000)
]);

// if response is timeout abort the request
if(res === timedOut) {
  abortController.abort();
} else {
  // do whatever you want to do with the result
}
})()

코드를 하나씩 살펴보겠습니다.

const timedOut = Symbol("Timeout")
const sleep= (delay) => new Promise((resolve, reject) => {
  setTimeout(resolve, delay, timedOut);
});

이 코드는 나중에 사용할 기호timedOut 값을 제공한 후 해결됩니다.

const abortController = new AbortController();
const signal = abortController.signal;

이것은 동일한 것을 사용하는 하나 이상의 webRequest를 취소할 수 있는 인터페이스입니다signal.

const res = await Promise.race([
  sleep(3000),
  getData(signal,3000)
]);

// if response is timeout abort the request
if(res === timedOut) {
  abortController.abort();
} else {
  // do whatever you want to do with the result
}

The Promise.race() method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.

우리의 경우 요청이 지정된 제한 시간보다 더 오래 걸리는 경우; sleep() 함수가 먼저 해결되고 요청을 중단하기 위해 응답을 비교할 수 있습니다.

그게 다야! :)