Vue でのネットワーク リクエストのカプセル化
Vue を使用して開発する場合、通常はネットワーク リクエストを使用してデータを取得または送信する必要があります。コードの可読性と保守性を向上させるために、ネットワーク リクエストをカプセル化し、統合処理ロジックを抽象化し、それをグローバルに使用できるように Vue インスタンスに追加できます。
以下は、uni.requestに基づく単純なネットワーク リクエストのカプセル化の例です。
const baseUrl = "http://localhost:6645";
const Authorization = token ? `Bearer ${
uni.getStorageSync("token")}` : "";
const request = (url = '', data = {
}, type = '') => {
return new Promise((resolve, reject) => {
uni.showLoading({
title: '加载中' }); // 显示加载框
uni.request({
method: type,
url: baseUrl + url,
data: data,
header: {
Authorization },
dataType: 'json',
success: (res) => {
resolve(res);
},
fail: (err) => {
reject(err);
},
complete: () => {
uni.hideLoading(); // 隐藏加载框
}
});
});
};
export default request;
このうち、 はbaseUrlインターフェイスの基本 URL アドレスを表し、Authorization保持されるトークン資格情報を表します。ここでは、アロー関数と ES6 の分割代入構文を使用して、コードを簡素化します。
このカプセル化メソッドは、要求された URL アドレス、要求されたデータ、および要求されたメソッド (GET、POST など) の 3 つのパラメーターを受け取ります。Promise オブジェクトを使用してリクエスト結果を返し、リクエスト中に読み込みボックスを表示します。
使用して拡張する
このネットワーク リクエストのカプセル化を Vue のプロトタイプ チェーンに追加して、グローバルにアクセスできるようにすることができます。このカプセル化メソッドを main.js ファイルに導入します。
import request from './request';
Vue.prototype.$request = request;
上記のコードでは、コンポーネントで使用するために属性requestにアタッチしました。$request
コンポーネント内で$requestネットワーク要求を行うために使用します。
<template>
<div>
<h2>{
{ title }}</h2>
<ul>
<li v-for="(item, index) in list" :key="index">{
{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
list: []
};
},
methods: {
loadData() {
this.$request('/api/data').then(res => {
this.title = res.title;
this.list = res.data;
}).catch(err => {
console.error(err);
});
}
},
mounted() {
this.loadData();
}
};
</script>
このメソッドを使用して$request、ネットワーク要求を開始し、データを取得し、コンポーネントの状態を更新します。このようにして、$requestネットワーク リクエストのコードを繰り返し記述することなく、任意のコンポーネントで を使用してネットワーク リクエストを開始できます。
ネットワークリクエストを拡張または変更する必要がある場合、カプセル化機能を変更するだけでよく、各コンポーネントで変更する必要はありません。
要約する
ネットワーク リクエストをカプセル化することで、コードの可読性、保守性、再利用性が向上し、ネットワーク リクエスト コードを繰り返し記述するという問題を回避できます。Vue では、グローバル アクセスのために、カプセル化されたメソッドを Vue インスタンス プロトタイプ チェーンに追加できます。