Vue Academy · レッスン

useFetch：非同期データComposable

data、loading、error ref、マウント時のfetch、refetch関数、AbortControllerのクリーンアップ

「useFetch：非同期データComposable」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

useFetchの目的

非同期データの取得では、ローディングフラグ、エラーハンドリング、リクエストそのものなど、同じ処理が何度も登場します。useFetchはこれらを1つの再利用可能なコンポーザブルにまとめ、data、loading、errorを返します。

3つのリアクティブなref

まず、あらゆる非同期リクエストの状態を表す3つのrefを用意します。

import { ref } from "vue";
function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
}

fetchの処理

loadingを切り替え、リクエストを実行し、結果を保存する非同期関数を作成します。次にエラーハンドリングを改善します。

async function execute() {
  loading.value = true;
  const res = await fetch(url);
  data.value = await res.json();
  loading.value = false;
}

try / catch / finally

リクエストをラップし、エラーをerrorに格納します。また、成功時でも失敗時でもfinallyでloadingを必ずリセットします。

async function execute() {
  loading.value = true;
  error.value = null;
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error("HTTP " + res.status);
    data.value = await res.json();
  } catch (e) {
    error.value = e;
  } finally {
    loading.value = false;
  }
}

onMountedでfetchする

コンポーネントがマウントされたときにリクエストを開始し、データを自動的に読み込みます。

import { onMounted } from "vue";
onMounted(execute);

refetch関数

利用側が必要なときに再読み込みできるよう、executeをrefetchとして公開します。ミューテーションの後や再試行ボタンから呼び出せます。

return { data, loading, error, refetch: execute };

クリーンアップのためのAbortController

リクエスト中にコンポーネントがアンマウントされた場合は、アンマウント済みのコンポーネントの状態を更新しないようにfetchを中止します。AbortControllerを作成し、そのsignalを渡します。

const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });

アンマウント時に中止する

onUnmountedで実行中のリクエストをキャンセルします。catchでは、その結果発生する中止エラーを無視します。

import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());

完全なuseFetch

組み立てると、このコンポーザブルはローディング、エラー、再取得、クリーンアップを1つの整理された単位で処理します。

function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const controller = new AbortController();
  async function execute() {
    loading.value = true; error.value = null;
    try {
      const res = await fetch(url, { signal: controller.signal });
      data.value = await res.json();
    } catch (e) {
      if (e.name !== "AbortError") error.value = e;
    } finally {
      loading.value = false;
    }
  }
  onMounted(execute);
  onUnmounted(() => controller.abort());
  return { data, loading, error, refetch: execute };
}

コンポーネントで使用する

利用側は3つのrefに基づいて表示を切り替えます。ローディング中はスピナー、失敗時はエラーメッセージ、それ以外ではデータを表示します。

const { data, loading, error } = useFetch("/api/posts");

テンプレートのパターン

テンプレート内で状態に応じて分岐し、完全なUXを構築します。

<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
  <li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>

確認問題

useFetchにおけるAbortControllerの役割は何でしょうか。

まとめ

data、loading、errorのrefを公開するuseFetch(url)を作成しました。onMountedでtry/catch/finallyパターンを使ってfetchし、refetch関数を備え、onUnmountedでAbortControllerをクリーンアップします。

よくある質問

「useFetch：非同期データComposable」レッスンは無料ですか？

はい。「useFetch：非同期データComposable」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「useFetch：非同期データComposable」で何を学びますか？

data、loading、error ref、マウント時のfetch、refetch関数、AbortControllerのクリーンアップブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「useFetch：非同期データComposable」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る