ユーザーが入力したテキストで検索してサジェストしたい
１文字ずつ入力するたびにリクエストを送ってしまうとサーバーに負荷がかかってしまうし、入力した結果が遅れて表示される問題がある
そこで、リクエスト中に入力があった場合は、前回のリクエストを中断したい
調べるとこれはAbortControllerを使うと実現できることがわかった
使い方は以下
var controller = new AbortController(); var signal = controller.signal; ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textContent = 'Download error: ' + e.message; }) ...
まずはAbortControllerをインスタンス化して、そこからsignalプロパティを受け取る
そして、それをfetchのオプションに渡すと準備が完了する
最後に何かのイベント発生時に、インスタンス化したコントローラーのabort()を呼び出すことでキャンセルすることができる
controller.abort();
一度キャンセルしたsignalに紐づくfetchは再実行できないのでインスタンス生成をしなおす必要がある
他参考
https://www.mitsue.co.jp/knowledge/blog/frontend/202012/14_0900.html
