axiosで通信を行っている間、プログレスバーを表示する

axiosで通信を行っている間、プログレスバーを表示する

YoutubeやGoogleで検索をかけたとき、結果が返ってくるまでプログレスバーによる進捗状況が表示されます。それをaxiosで実装できると知ったのでメモ。

onUploadProgress・onDownloadProgress

axiosコールバック関数を受け取りそれぞれファイルのアップロード時とダウンロード時の進捗状況を取得できる

名前からして、ファイルをサーバーにアップロードするときは、onUploadProgress, 検索などデータが返ってくるまで待つ処理はonDownloadProgressを使用するのかもしれない。
もう少し、勉強がてら別の時にでも使ってみようと思う。

axios.get(url, {
  // 色々
  onUploadProgress: onUploadProgress
  onDownloadProgress: onDownloadProgress,
});

進捗状況が変化すると、以下の形式のオブジェクトが返ってくる。Content-Lengthheaderがないとtotal, progressがundefinedとなり進捗状況がわからなくなるので注意。

{
  "bytes": 49278,
  "download": true,
  "estimated": "undefined",
  "event": "~",
  "lengthComputable": true,
  "loaded": 52054,
  "progress": 1,
  "rate": "undefined",
  "total": 52054
}

進捗状況をstateで管理すると、簡単にプログレスバーができる

コード例

// コンポーネントは何でもいいです
import { Progress } from "@/components/ui/progress";

const App = () => {
  const [progress, setProgress] = useState<number>(0);
  const onSubmit = async() => {
    try {
      const response = await axios.post('/url', {
        onDownloadProgress: (e: AxiosProgressEvent) => {
          if (!e.total) return;
          const percentCompleted = Math.round((e.loaded * 100) / e.total);
          setProgress(percentCompleted);
        };
      });
      console.log(response)
    } catch(e) {
      if(isAxiosError(e)) {
        console.error(e)
      }
      return e;
    }
  }
  return (
    <>
      <button onClick={onSubmit}>Submit</button>
      <Progress className={cn("rounded-none h-1 mb-4")} value={progress} />
    </>
  )
}

最後に

コードや説明など間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。