[axios]前のリクエストが終わっていないときはキャンセルする[react]

Question

ご覧頂きありがとうございます。

axiosでリクエストの結果が返ってくる前に次のリクエストがきた場合、前のリクエストをキャンセルさせたいのですが、どう書けば良いのでしょうか？

cancel.Tokenを使うのはわかったのですが、上手く動作しなく詰まっています、、、

  updateContentHandler() {
    axios
    .get(url, {
      headers: {
        hoge: `fuga`
      },
      params: {
        param: this.state.param
      }
    })
    .then((res) => {
      this.setState({
        result: res.data.result 
      })
    })
    .catch((error) => {
      console.log(error);
    })
  }

Comments

[yambejp]

放置しちゃダメなんでしょうか？

[yappi_tengen]

検索機能なのでリクエストが変更される毎に結果を返しているのですが、複数回レンダリングされてしまう事象を解決したく、、、

Answer 1

promise処理だとAbortControllerが利用できるかもしれません

const controller = new AbortController();
const signal = controller.signal;
fetch('test.php?s=3',{signal}).then(res=>res.text()).then(console.log);
fetch('test.php?s=1',{signal}).then(res=>res.text()).then(console.log);
setTimeout(()=>controller.abort(),2000);

//test.php
$s=filter_input(INPUT_GET,"s")?:0;
sleep($s);
echo $s;

Comments

[yambejp]

上記phpはs秒まってsを出力する仕様にしてあります。
jsは最初3秒で走らせ次に1秒で走らせています
2秒後にabortすれば1は実行結果が表示され、3は表示されません

axiosの処理はちょっと把握してません。いまどきのブラウザならfetchでよいような・・・

[yappi_tengen]

ありがとうございます！