AdotControllerとAxiosキャンセルトークンの実用化事例

導入
API要求を行う機能を実装する場合、機能要件に基づいて保留中の要求をキャンセルする必要がある場合、またはアプリケーションで予期しない動作を防ぐ必要がある場合があります.
これらの行事の中には

ユーザーに保留中の要求をキャンセルする機能を提供します.

ユーザーがページを離れるとき、進行中の要求を中止すること.

入力が変わるとき、新しいものを作る前に保留中の要求をキャンセルすること.

これらの最も現代的なブラウザのようなシナリオを処理するには、Fetch API .
The Axios HTTPクライアントパッケージは、取り消しに基づくキャンセルトークンAPIを使用してAPI要求キャンセルを扱いますcancelable promises proposal .

ゴール
フェッチAPIとAxiosキャンセルトークンを使用してAPIリクエストをキャンセルする方法を示すには、自動補完検索機能を実装します.
オートコンプリート検索は、ユーザーが検索バーで値を入力するたびにAPIリクエストを行います.
この機能は、入力の内容が変わるたびに、新しいものを作る前に、保留中のAPIリクエストを取り消す方法を示します.
実装フローチャート

実装に進む前に、検索入力フィールドを作成し、イベントリスナーとリスナーコールバックを追加します.
まず、検索入力フィールドを選択します.

const input = document.querySelector('#search');

次に、検索フィールドにイベントリスナーを追加しますsearchItems 入力変更時にコールされるコールバック

input.addEventListener('input', searchItems);

The searchItems コールバック関数は、FETAPIとAxiosを使って実装され、各行が何をしているかを説明するためにコメントします.

フェッチAPI実装
APIリクエストを作成する前に、AbortController() コンストラクタとして、AbortSignal を使ったオブジェクトAbortController.signal プロパティ.
フェッチAPIリクエストが開始されると、AbortSignal リクエストオプションオブジェクトの中のオプションとして、これはシグナルとコントローラをフェッチ要求と関連づけて、呼び出しによってそれを中止するのを許しますAbortController.abort() .
それが重要であるときに注意してくださいabort() メソッドをfetch() 約束はDOMException 名前AbortError . 私たちはDOMException 要求のキャンセルによってエラーが発生したかどうかを知る名前.
実装を進めましょう.各行が何をしているかを説明してください.

...

let controller;

function searchItems(event) {
    // Grab the user input from the input event param
    const query = event.target.value;

    // Check if an AbortController instance has been assigned to the controller variable, then call the abort method when true.
    // To cancel a pending request the abort() method is called.
    if (controller) controller.abort();

    // A new instance of the AbortController is created before making the API request
    controller = new AbortController();

    // grab a reference to its associated AbortSignal object using the AbortController.signal property
    const signal = controller.signal;

    // We pass in the AbortSignal as an option inside the request's options object
    fetch(`https://example.com?name=${query}`, {signal})
        .then(function(response) {
            console.log(response);
        }).catch(function(e) {
        // Check the exception is was caused request cancellation
        if (e.name === 'AbortError') {
            // handle cancelation error
        } else {
            // handle other error
        }
    })
}

Axios実装
Axiosを使ってリクエストをキャンセルするにはcancel(...) メッセージのオプションパラメータを受け取るキャンセルトークンAPIからのメソッドが呼び出されます.
APIリクエストを作成する前に、キャンセルトークンが生成され、オプションとしてaxios設定に渡されます.トークンは現在のリクエストとcancel(...) メソッド.
アクシオスがキャンセルのために拒否するとき、axios.isCancel(...) 引数として例外を取るメソッドは、例外がキャンセルによるものかどうかをチェックするために使用します.
実装を進めましょう.

...

// create a source variable which we will later assign cancel token using the CancelToken.source factory.
let source;

function searchItems(event) {
    // Grab the user input from the input event param
    const name = event.target.value;


    // Check if a CancelToken.source has been assigned to the source variable, then call the cancel method when true.
    if (source) source.cancel('Operation canceled by the user.');

    // Assign the source factory to the source variable
    source = axios.CancelToken.source();

    const option = {
        params: { name }, // Pass query strings via param option
        cancelToken: source.token // add the cancel token, as an option for the request
    };

    axios.get('https://example.com', option)
        .then((response) => {
            console.log(response)
        })
        .catch(function (thrown) {
            if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
            } else {
                // handle error
            }
        });
}

結論
このチュートリアルでは、オートコンプリート検索機能を実装することによってフェッチAPIとAxiosリクエストをキャンセルする方法を学びました.この実装では、必要に応じてリクエストキャンセル機能を作成することができます.

追加リソース

AbortController - Web APIs | MDN

Cancellation | Axios Docs