コンポーネントのマウント時にリクエストし、アンマウント時にキャンセルする 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との組み合わせが便利なんじゃなかろうか。