【JS】【TS】axios で リクエストに対してキャンセルするには

■ はじめに

https://dk521123.hatenablog.com/entry/2021/01/14/101645

の続き。

axios で 外部APIと通信する際に、重い処理の場合、
キャンセルした場合が多々あると思う。
(例えば、ユーザが待たされすぎて、キャンセルしたい
 又は、別の操作を行いたい場合)

そんなことで、キャンセル方法を学んだので、メモする。

■ 使用イメージ

import axios from "axios";

// CancelTokenクラスからソースオブジェクトを取得する
private axiosCancelSource = axios.CancelToken.source();

// cancelTokenにキャンセル用のトークンを設定しておく
axios.get('https://xxxxx.yyyy.com/users', {
      cancelToken: axiosCancelSource.token,
    })
  .then((response) => {
    console.info(response);
  })
  .catch((ex: AxiosError) => {
    // 例外が発生した場合

    // それがキャンセルによって発生したものを isCancel() で判断する
    if (axios.isCancel(ex)) {
      console.log('Canceled', ex.message);
    } else {
     console.error(ex);
    }
  });

// キャンセルする場合、cancel()を設定しておく
this.axiosCancelSource.cancel();

参考文献

https://uraway.hatenablog.com/entry/2019/03/20/141024
https://siosio.hatenablog.com/entry/2020/02/23/070457
https://qiita.com/wintyo/items/1148ed14423f6b8bc368
https://programmerstart.com/article/9080187538/
https://www.fixes.pub/program/103665.html

関連記事

axios ~ 外部API通信ライブラリ ~
https://dk521123.hatenablog.com/entry/2021/01/14/101645
非同期処理 ~ async/await, Promise ~
https://dk521123.hatenablog.com/entry/2021/01/16/202822