[js]fetchネットワークリクエストのキャンセル

この文章はバックジャンプとバックジャンプから続いている.
前のリバウンドジャンプで解決できるように見える問題は解決されていません.なぜ解包を適用しても同じエラーが発生するのでしょうか.
これは,イベントが複数回発生すると,ネットワーク応答が到達する順序が異なるため,アンインストールを行ってもイベントが複数回発生する可能性があるためである.

上のgifを見て、iphoneという言葉を入力し、それに関連する自動完了リストを出力します.しかし、単語を打つ過程で、私も思わずㅇを打って、少し立ち止まった.しかし、その瞬間は500ミリ秒を超えたようだ.だからㅇを打つと、事件が発生し、아이폰を入力すると、事件も発生し、全部で2回発生しました.
しかし、問題は、아이폰入力イベントのfetch応答と比較して、ㅇ入力イベントのfetch応答がより遅く到着することである.
今問題を発見した原因は活動ではない.問題の原因はイベントではなく,イベント発生後に実行されるfetchのネットワーク応答が要求の順序で保証されないためである.

どうしよう...

最初、順番を保証できる方法があるかどうか調べてみました.しかし、検索結果の多くは、a、b、cの3つの関数を非同期で実行する際にどのように順序を保証するかについての内容であり、これは私の問題を解決する方法ではありません.見つからない順番を保証する方法があるかもしれませんが、どうしても見つかりません.
後で思い出したのは먼저 간 요청을 취소하면 되지 않나?です.네트워크 요청 취소を検索して、方法を見つけました.

AbortController

fetchリクエストの処理をキャンセルこの文章を発見したのは初めてで、見ると今の問題の解決方法だと思います.AbortControllerを使用すると、fetchを介して送信されたネットワーク要求をキャンセルすることができる.MDNを見て、以下のように説明します.
インタフェースは、必要に応じて1つ以上のWebリクエストを停止できるコントローラオブジェクトを表します.
翻訳...おかしい...とにかく中断できます.
使い方は思ったより難しくありません.

は、新しいconst abortController = new AbortController()

を生成する.

fetchオプション追加signal: abortController.signal

の要求をキャンセルする必要があるタイミングでabortController.abort()

を実行する.
今はfetchを使う部分は自動的に検索語を完成させるだけですが、プロジェクトが拡大するにつれてfetchを使うクラスが増えていくので、クラスごとに呼び出したほうがいいです.
したがって、AbortControllerという属性がFetchControllerのオブジェクトが作成されます.

FetchController

class FetchController {
  constructor() {
    this.abortController = null;
    this.isPending = false;
  }

  fetch(url) {
    //isPending으로 이전 네트워크 요청의 상태를 확인하고
    //isPending이 true면 abort시키고 아니면 새로운 요청을 한다
    if (this.isPending) {
      this.abortController.abort();
    }
    //AbortController는 일회성이라 fetch를 실행하는 함수 안에서 생성해줘야 한다.
    this.abortController = new AbortController();
    this.isPending = true;

    return (
      fetch(url, { signal: this.abortController.signal })
        .then(res => res.json())
        .finally(() => {
          this.isPending = false;
        })
    );
  }
  //요청을 취소해야하는 타이밍에 이 abort()를 사용한다.
  abort() {
    this.abortController.abort();
  }
}

export { FetchController };

使用

//fetcher라는 말을 쓰나? 그냥 예시로 쓰려고 대충 만들었다
class AutoCompleteFetcher {
	constructor() {
        //FetchController 인스턴스를 생성한다
		this.autoCompleteFetchController = new FetchController();
	}
  
	//자동 완성 데이터를 요청하는 함수
	fetchAutoCompleteSearchTerms() {
      	const url = `https://블라블라`;
      
      	//이 fetch는 fetchController 클래스의 새로 만든 fetch
        return this.autoCompleteFetchController
          .fetch(url)
          .then('fetch하고나서 할 동작'));
        }

	//fetch 후 동작할 함수이자 abort가 실행되어야 할 타이밍의 어떤 함수
	abortTimingFunction() {
		this.abortController.abort();
	}
}

問題を解決して、タイプを打つ時に間違いがなくて、削除する時にビデオを撮りました.ビデオのように、Inputウィンドウが空の場合、最近の検索語が表示されるはずですが、解決する前に最近の検索語が表示され、遅くなった自動完了リストが印刷されるエラーが発生しました.
しかし、最近の検索語が表示されたときに終了するように要求されたため、エラーは右側のコンソールに出力され続けます.

に注意

AbortControllerはfetchリクエストをキャンセルします.いずれにしても、リクエストなのでそうは思えず、サーバにリクエストを出します.だから滴丸と糸があり、これらの方法は適切に組み合わせて使用しなければならない.
fetchリクエストの処理をキャンセル
JavaScript ES 6+:Fetchからリクエストをキャンセルします。