■ はじめに
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