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 は Promise.race を使用して複数の Promise を実行し、1 つが拒否または解決で終了すると、残りのすべてを停止します。

// 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 中国語 Web サイトの他の関連記事を参照してください。