現代のフロントエンド開発において、Ajax リクエストはバックエンドとデータをやり取りするための不可欠な技術です。Vue.js は、プログレッシブな JavaScript フレームワークとして、Ajax リクエストを処理する多种多様な方法を提供しています。その中でも vue-resource は、広く利用されているライブラリの一つです。Vue 2.x 以降、公式推奨の Ajax 処理ライブラリは axios に移行しましたが、vue-resource には依然として独自の利点と利用シーンが存在します。本記事では、vue-resource ライブラリを深く掘り下げ、その使用方法とベストプラクティスを探ります。
vue-resource とは？
vue-resource は Vue.js 向けの HTTP クライアントライブラリで、Vue コンポーネント内で簡単に Ajax リクエストを実行できます。GET、POST、PUT、DELETE などの多种の HTTP メソッドをサポートし、豊富な設定オプションとインターセプタ機能を提供します。
vue-resource のインストール
まず、vue-resource をインストールする必要があります。npm または yarn を使用してインストールできます。
<pre><code>npm install vue-resource --save
# または
yarn add vue-resource</code></pre>
インストールが完了したら、Vue プロジェクトのエントリーファイルで vue-resource をインポートして使用します。
<pre><code>import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);</code></pre>
基本的な使い方
GET リクエストの送信
Vue コンポーネント内で this.$http を使用して Ajax リクエストを送信できます。以下は GET リクエストの送信例です。
<pre><code><template>
<div>
<h1>ユーザーリスト</h1>
<ul>
<li v-for="item in userData" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
userData: []
};
},
created() {
this.loadUserData();
},
methods: {
loadUserData() {
this.$http.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.userData = response.body;
})
.catch(error => {
console.error('ユーザーデータの取得に失敗しました:', error);
});
}
}
};
</script></code></pre>
この例では、コンポーネントの作成時に GET リクエストを送信し、サンプル API からユーザーデータを取得して userData データプロパティに保存しています。
POST リクエストの送信
POST リクエストの送信方法も同様です。以下は POST リクエストの送信例です。
<pre><code><template>
<div>
<h1>新規ユーザー作成</h1>
<form @submit.prevent="submitFormData">
<input v-model="formData.name" placeholder="名前">
<input v-model="formData.email" placeholder="メール">
<button type="submit">作成</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
email: ''
}
};
},
methods: {
submitFormData() {
this.$http.post('https://jsonplaceholder.typicode.com/users', this.formData)
.then(response => {
console.log('ユーザーが作成されました:', response.body);
})
.catch(error => {
console.error('ユーザーの作成に失敗しました:', error);
});
}
}
};
</script></code></pre>
この例では、フォームからユーザー入力を収集し、フォーム送信時に POST リクエストを送信して、新しいユーザーデータをサーバーに送信しています。
設定とインターセプタ
グローバル設定
アプリケーションの初期化時にグローバル設定を設定できます。例えば、ルート URL とデフォルトのリクエストヘッダーを設定します。
<pre><code>Vue.http.options.root = 'https://jsonplaceholder.typicode.com';
Vue.http.headers.common['Authorization'] = 'Bearer token';</code></pre>
インターセプタ
vue-resource はリクエストとレスポンスのインターセプタを提供しており、リクエスト送信前やレスポンス受信後に処理を実行できます。以下はインターセプタの使用例です。
<pre><code>Vue.http.interceptors.push((request, next) => {
console.log('リクエスト:', request);
// リクエストヘッダーを修正
request.headers.set('X-Custom-Header', 'CustomValue');
next(response => {
console.log('レスポンス:', response);
// レスポンスエラーの処理
if (!response.ok) {
console.error('リクエストが失敗しました:', response.statusText);
}
});
});</code></pre>
この例では、リクエスト送信前とレスポンス受信後にそれぞれログを出力し、リクエストヘッダーにカスタムヘッダーを追加しています。
高度な使い方
並行リクエスト
複数のリクエストを同時に送信し、すべてのリクエストが完了するのを待つ必要がある場合があります。Promise.all を使用して並行リクエストを実現できます。
<pre><code>this.$http.get('https://jsonplaceholder.typicode.com/users')
.then(usersResponse => {
return Promise.all([
usersResponse,
this.$http.get('https://jsonplaceholder.typicode.com/posts')
]);
})
.then(([usersResponse, postsResponse]) => {
this.userList = usersResponse.body;
this.postList = postsResponse.body;
})
.catch(error => {
console.error('エラー:', error);
});</code></pre>
カスタムリソース
vue-resource は resource メソッドを提供しており、カスタムリソースを定義して RESTful 操作を実行できます。
const PostResource = this.$resource('https://jsonplaceholder.typicode.com/posts{/id}');
PostResource.get({ id: 1 }).then(response => {
console.log('投稿:', response.body);
});
PostResource.save({ title: '新しい投稿', body: '内容' }).then(response => {
console.log('投稿が作成されました:', response.body);
});