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

가져오기 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!