Closed2022/09/15にクローズ1

React内でaxiosを利用した通信を途中で中断する方法

実装は以下の通り。注意点としては、2点あります。

1点目は、変数・定数ではなく状態として持っておかないと動作しません。
const abortControllerRef = new AbortController()では動作しません。

2点目は、一度キャンセルすると、再利用できないため、再度インスタンス生成して上げる必要があります。そのまま使おうとしても動作しません。

// ueeRefで状態として管理する
const abortControllerRef = React.useRef(new AbortController());
axios
  .get('/foo/bar', {
    signal: abortControllerRef.current.signal,  // ここをセット
  })
  .then(function (response) {
    //...
  }); 

const onClickCancel = () => {
  // リクエストをキャンセル
  abortControllerRef.current.abort();
  // 一度リクエストがキャンセルされると、再利用できないためインスタンス作り直す必要がある
  abortControllerRef.current = new AbortController();
}

このスクラップは2022/09/15にクローズされました