Vue.jsでAPIと通信する場面では、レスポンスの内容に応じて適切にUIを切り替える処理が求められます。たとえば、成功時はデータを表示し、失敗時にはエラーメッセージを、未認証であればログイン画面への誘導などが必要になります。本記事では、APIレスポンスのステータスに基づいてUIを分岐させる基本的な設計方法を紹介します。
前提：AxiosでのAPI通信
Axiosを使った非同期通信は、Vue.jsの開発において一般的です。まずは基本的な通信例を確認しておきましょう。
import axios from 'axios';
axios.get('/api/user')
.then(response => {
console.log('成功', response.data);
})
.catch(error => {
console.error('エラー発生', error.response);
});
上記のように、成功時と失敗時で異なる処理が可能ですが、これをUI側に反映させるためには状態管理が重要です。
UI分岐に必要な状態の定義
UIの状態を制御するために、以下のようなステータス変数を用意します。
const state = reactive({
loading: false,
success: false,
error: false,
unauthorized: false,
data: null,
});
そして、API呼び出し時にそれぞれのフラグを制御することで、UIの切り替えを実現します。
APIレスポンスに応じた処理分岐
AxiosのエラーレスポンスにはHTTPステータスコードが含まれているため、それに応じて状態を切り替えることができます。
const fetchData = async () => {
state.loading = true;
state.success = false;
state.error = false;
state.unauthorized = false;
try {
const res = await axios.get('/api/user');
state.data = res.data;
state.success = true;
} catch (err) {
if (err.response) {
if (err.response.status === 401) {
state.unauthorized = true;
} else {
state.error = true;
}
} else {
state.error = true;
}
} finally {
state.loading = false;
}
};
このようにすることで、「成功」「失敗」「未認証」それぞれに対応できます。
テンプレートでのUI制御
状態変数に応じたUIの出し分けは、以下のようにv-ifやv-else-ifで実装します。
<template>
<div v-if="state.loading">読み込み中...</div>
<div v-else-if="state.success">
<pre>{{ state.data }}</pre>
</div>
<div v-else-if="state.unauthorized">
認証されていません。ログインしてください。
</div>
<div v-else-if="state.error">
エラーが発生しました。再度お試しください。
</div>
</template>
このようにすることで、ユーザーが現在どの状態にあるかを明確に伝えることができ、UXの向上にもつながります。
まとめ
Vue.jsとAxiosを使ったAPI通信では、成功・失敗・未認証といった複数の状態を的確にハンドリングし、UIに反映させることが重要です。ステータスごとにフラグを設け、テンプレート側で条件分岐を行うことで、直感的でエラーにも強いUIを構築できます。外部APIとの連携が多いアプリでは、こうした分岐処理を丁寧に設計することが信頼性向上に直結します。
