Promise.race를 사용하여 호출을 가져오는 데 시간 제한을 추가하는 방법-JS 튜토리얼-php.cn

Promise.race를 사용하여 호출을 가져오는 데 시간 제한을 추가하는 방법

Mary-Kate Olsen

풀어 주다： 2024-12-01 18:18:11

원래의

276명이 탐색했습니다.

How to use Promise.race to add timeout to fetch calls

가져오기 API는 네트워크 요청에 매우 편리하지만 시간 초과 기능이 내장되어 있지 않습니다. 즉, 네트워크가 느리거나 서버가 응답하지 않으면 앱이 무기한 중단될 수 있습니다.

다행히도 JavaScript는 이벤트 중심 프로그래밍에 중점을 두고 Promise 객체에 그룹화된 유틸리티 기능 세트를 제공하는 다용도 언어입니다. Promise.race 메서드를 사용하면 가져오기 호출에 대한 시간 초과 메커니즘을 만들 수 있습니다. 이렇게 하면 네트워크 상황이 계획대로 진행되지 않는 경우에도 애플리케이션의 응답성을 유지할 수 있습니다.

Promise.race를 사용하여 이 시간 초과를 구현하는 방법을 안내해 드리겠습니다. 간단한 가져오기 예제로 시작한 다음 시간 초과를 추가하여 향상시키겠습니다. 또한 CSRF 토큰을 다루는 실제 시나리오를 공유하여 이 방법이 보안 컨텍스트에서 어떻게 작동하는지 보여 드리겠습니다.

다음이 있다고 가정해 보겠습니다.

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

// Make the fetch request
const response = await fetch(fetchUrl, options);

로그인 후 복사

가져오기에 시간 초과 메커니즘을 추가하려는 경우 거부를 트리거하는 시간 초과가 포함된 약속을 생성할 수 있습니다. Promise는 Promise.race를 사용하여 여러 Promise를 실행하고 하나가 거부 또는 해결로 끝나면 나머지 모든 것을 중지합니다.

// Timeout mechanism for fetch
const fetchWithTimeout = (url, options, timeout = 5000) => {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) => setTimeout(() => reject(new Error('Request timed out')), timeout))
    ]);
};

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

로그인 후 복사

다음은 CSRF 토큰을 사용한 실제 사례입니다

// Validate CSRF token
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
if (!csrfToken) {
    throw new Error('CSRF token not found in the document.');
}

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

// Timeout mechanism for fetch
const fetchWithTimeout = (url, options, timeout = 5000) => {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) => setTimeout(() => reject(new Error('Request timed out')), timeout))
    ]);
};

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

로그인 후 복사

위 내용은 Promise.race를 사용하여 호출을 가져오는 데 시간 제한을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!