このブログでは、AbortController API に焦点を当てながら、JavaScript を使用してフェッチ リクエストをキャンセルする実践的な手順を説明します。最後には、Web アプリの応答性を高め、リソースを使いやすくする方法を明確に理解できるようになります。

フェッチリクエストをキャンセルする必要があるのはなぜですか?

次のようなシナリオでは、フェッチ リクエストのキャンセルが重要です。

• ユーザー エクスペリエンス: ユーザーがページから移動しても、そのページのデータを取得し続ける必要はありません。

• 検索の最適化: キーストロークごとにリクエストがトリガーされる検索機能では、新しいリクエストを送信する前に前のリクエストをキャンセルする方が効率的です。

• タイムアウトのシナリオ: ネットワークの遅延やリクエストの実行時間が長い場合は、タイムアウトを設定し、一定の期間を超えた場合にリクエストをキャンセルすることができます。

AbortController について

AbortController API は、フェッチ リクエストをキャンセルするエレガントな方法を提供します。これは、AbortController インスタンスを作成することで機能し、そのシグナルがフェッチ リクエストに渡されます。コントローラーで abort() メソッドを呼び出すと、リクエストがキャンセルされます。

フェッチリクエストをキャンセルするためのステップバイステップガイド

1. AbortController

最も基本的な例から始めましょう: AbortController の作成とフェッチ リクエストのキャンセルです。

// Step 1: Create an instance of AbortController
const controller = new AbortController();

// Step 2: Pass the signal to the fetch request
fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log('Data:', data))
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Fetch request was canceled');
        } else {
            console.error('Fetch error:', err);
        }
    });

// Step 3: Cancel the fetch request
controller.abort();

2.実用的な使用例: ユーザー操作時のリクエストのキャンセル
一般的なシナリオの 1 つは、ユーザーの操作に応じてフェッチ リクエストをキャンセルすることです。たとえば、検索機能を実装する場合、キーストロークごとに新しいフェッチ リクエストがトリガーされる可能性があります。前のリクエストをキャンセルすると、古いデータや無関係なデータが処理されなくなります。

let controller;

function search(query) {
    // Cancel the previous request if it exists
    if (controller) {
        controller.abort();
    }

    // Create a new controller for the new request
    controller = new AbortController();

    // Fetch data with the new controller
    fetch(`https://jsonplaceholder.typicode.com/posts?query=${query}`, { signal: controller.signal })
        .then(response => response.json())
        .then(data => console.log('Search results:', data))
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Previous request canceled');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage: simulate user typing
search('React');
search('Vue'); // The request for 'React' is canceled

3.フェッチリクエストのタイムアウトの実装
信頼性の低いネットワーク状態に対処する場合、タイムアウトは不可欠です。 AbortController を使用すると、時間がかかりすぎる場合にフェッチ リクエストをキャンセルするタイムアウト メカニズムを簡単に実装できます。

function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);

    return fetch(url, { signal: controller.signal })
        .then(response => {
            clearTimeout(timeoutId);
            return response.json();
        })
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Fetch request timed out');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', 3000)
    .then(data => console.log('Data:', data));

フェッチリクエストのキャンセルを適切に処理する

フェッチリクエストをキャンセルするときは、それらを適切に処理することが重要です。これには、キャンセルによって引き起こされるエラーと他のタイプのエラーを区別することが含まれます。

fetch(url, { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => {
        if (err.name === 'AbortError') {
            // Handle cancellation specifically
            console.log('Request was canceled');
        } else {
            // Handle other types of errors
            console.error('Request failed', err);
        }
    });