コンポーネントのマウント時にリクエストし、アンマウント時にキャンセルする axios リクエスト
とりあえず解はこうなった。
ライブラリのバージョン
- axio 0.18.0
- react 16.8.3
- react-dom 16.8.3
動作確認はこちら:
ボタンクリックでコンポーネントのマウント・アンマウントが切り替えできる。APIリクエスト中にアンマウントされると、下のようなエラーメッセージと共にリクエストがキャンセルされる。
解説
解説というものでもないかもしれないが、ちょっと説明。
useEffect
でマウント時のAPIリクエストのメソッドにキャンセルトークンソースを渡す。また、useEffect
の戻り値はアンマウント時に実行されるので、ここでAPIリクエストのキャンセルを定義する。
function useAxios(fetchAction) { useEffect(() => { const signal = axios.CancelToken.source(); fetchAction({ signal }); return () => { signal.cancel("Api is being canceled"); }; }, []); }
あとはaxios
にキャンセルトークンを渡すだけ:
useAxios(({ signal }) => { async function getUser() { const res = await axios.get("https://randomuser.me/api/", { cancelToken: signal.token }); setResult(res.data.results[0]); } getUser(); });
react-router
との組み合わせが便利なんじゃなかろうか。