React - fetchのかわりにaxiosを使う

[kawabata2018]

背景

• fetchはシンプルだが、多少使い勝手が悪い
  • 特にステータスコード4xx, 5xxで例外をthrowしてくれないのが扱いづらい
• axiosを使うことで上記の問題が解決する
• axios.interceptorsを使うと共通処理が書けて便利

To do

• 既存のsample-appをaxiosを使う形で書き換える

完了条件

• レビューを受け、mainブランチにmergeされている

[kawabata2018]

axiosでcleanup!

useEffect(() => {
  // do something
  const source = axios.CancelToken.source();

  // do something
  const res = await axios(url.toString(), {
    cancelToken: source.token
  });

  // do something

  return () => source.cancel("Component got unmounted");
}

[kawabata2018]

axios.interceptorsを使ったエラーハンドリング

import axios, { AxiosResponse, AxiosError } from 'axios';

const http = axios.create();

const onSuccess = (response: AxiosResponse) => response;

const onError = (error: AxiosError) => {
  if (axios.isCancel(error)) {
    console.log("request cancelled!");
    return;
  }
  if (error.message === "Network Error") {
    window.location.href = "/503";
    return;
  }
  if (typeof error.response === "undefined") {
    alert("予期せぬエラーが発生したよ。ぴえん");
    return Promise.reject(error);
  }
  switch (error.response.status) {
    case 500:
      window.location.href = "/500";
      return;
    default:
      alert("予期せぬエラーが発生したよ。ぴえん");
      return Promise.reject(error);
  }
};

http.interceptors.response.use(onSuccess, onError);

export default http;

[kawabata2018]

25 で完了しているのでclose