AdotControllerとAxiosキャンセルトークンの実用化事例
5682 ワード
導入
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
Reference
この問題について(AdotControllerとAxiosキャンセルトークンの実用化事例), 我々は、より多くの情報をここで見つけました https://dev.to/03balogun/practical-use-case-of-the-abortcontroller-and-axios-cancel-token-4k61テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol