Composableでの非同期エラー処理
非同期Composableでのtry/catch、エラー状態の公開、useFetchでのリトライ処理
「Composableでの非同期エラー処理」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
非同期コンポーザブルのエラー
データの取得や非同期処理を行うコンポーザブルには、独自のエラー戦略が必要です。基本的なパターンは、非同期関数内で失敗を捕捉しつつ、コンシューマーが対応できるよう error ref を公開することです。
error ref を公開する
データと loading とともに error ref を返します。コンシューマーはこれを監視してメッセージを表示します。
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}非同期関数での try / catch
非同期関数内では、await する呼び出しを try/catch で囲み、捕捉されないままスローするのではなく、失敗を error ref に保存します。
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}エラー状態をリセットする
試行するたびに開始時点で以前のエラーを消去し、リトライが成功した後も古いメッセージが残らないようにします。
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}retryCount ref
リトライに対応するには、retryCount ref で試行回数を追跡します。ユーザーがリトライするたびにインクリメントします。
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}自動リトライロジック
試行の間隔を徐々に延ばしながら、上限回数まで自動的にリトライできます。回数が最大値を超えたら停止します。
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}完全な API を返す
コンポーネントが必要とするすべての要素を使えるように、data、error、リトライ関数、retryCount を公開します。
return { data, error, retry, retryCount };エラーを利用する
コンポーネントでは、error ref の状態に応じてレンダリングし、公開された関数に接続したリトライボタンを用意します。
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>コンポーザブルのエラーとグローバルハンドラー
コンポーザブルレベルのエラー処理は、UI が反応すべき予期される失敗、たとえばリクエストの失敗やバリデーションエラーに使用します。どのように表示するかはコンポーネントが決定します。
グローバル境界が介入する場合
グローバルハンドラーとエラーバウンダリは、プログラミング上のバグやレンダリングのクラッシュなど、予期しない未処理のエラーを捕捉します。これらはセーフティネットであり、予測可能な非同期失敗を主に処理するものではありません。
適切なレイヤーを選ぶ
目安として、予測できる非同期エラーはコンポーザブル内で error ref を使って処理し、本当に予期しないエラーはグローバルハンドラーまで伝播させます。これにより、UI のフィードバックはローカルに、クラッシュ対策はグローバルに保てます。
クイックチェック
失敗した fetch のような、予期される非同期失敗はどこで処理すべきですか？
まとめ
非同期コンポーザブルでは error ref を公開し、非同期関数内で try/catch を使用することを学びました。また、retryCount ref とリトライ関数でリトライに対応し、コンポーザブルレベルのエラーで予期される失敗を処理し、グローバルハンドラーで予期しない失敗を処理します。
よくある質問
「Composableでの非同期エラー処理」レッスンは無料ですか？
はい。「Composableでの非同期エラー処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Composableでの非同期エラー処理」で何を学びますか？
非同期Composableでのtry/catch、エラー状態の公開、useFetchでのリトライ処理 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Composableでの非同期エラー処理」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- onErrorCapturedライフサイクルフック
- Error Boundaryコンポーネント
- グローバルエラー向けapp.config.errorHandler
- Composableでの非同期エラー処理