axiosのinterceptorsで、requestのキャンセルを行う

tl;dr

interceptors.request.use()内でaxios.Cancel()をthrowすることでリクエストを直前でキャンセルできます。

🚀サンプル

認証トークンがlocalStorageに保存されており、トークンがなければAPIリクエストを投げたくないというケースを考えてみます。

認証トークンを取得する関数は以下です。

function getToken(){
  return window.localStorage.getItem("token");
}

axiosのinterceptorsを定義します。

const axios = require('axios');

  axios.interceptors.request.use(config => {
    if (!getToken()) {
      throw new axios.Cancel('トークンがないためリクエストはキャンセルされました');
    } else {
      config.headers.Authorization = "Bearer " + getToken();
      return config;
    }
  });

適当なドライバを作成し、コールしてみます。この時、ローカルストレージは空なので、requestがキャンセルされるはずです。

  async function getZip() {
    try {
      const response = await axios.get('http://api.thni.net/jzip/X0401/JSON/064/0941.js');
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  }

  getZip();

実行結果

Cancel { message: 'トークンがないためリクエストはキャンセルされました' }

思惑通り、requestはキャンセルされました。

以上。