VUE3 入門チュートリアル: Vue.js プラグインを使用して API インターフェイス リクエストをカプセル化する

Vue.js は現在最も人気のあるフロントエンド フレームワークの 1 つであり、Vue3 は Vue.js の最新バージョンであり、よりシンプルな構文と優れたパフォーマンスを提供します。 Vue.js の開発では、データ リクエストは重要な部分であり、API インターフェイスのリクエストもプログラマーの一般的なタスクの 1 つです。このチュートリアルでは、Vue.js プラグインを使用して API インターフェイス リクエストをカプセル化する方法を詳しく紹介します。

Vue.js プラグインとは何ですか?

Vue.js では、プラグインは Vue.js アプリケーションにグローバル レベルの機能を提供できる機能モジュールです。機能をプラグインにカプセル化し、プロパティ、ディレクティブ、コンポーネントなどを Vue.js アプリケーションに挿入できます。 Vue.js では、Vue Router や Vuex などの一般的なプラグインが公式に提供されていますが、必要な機能を実現するために独自のプラグインを作成することもできます。

1. プラグインの作成

グローバル関数またはプロパティを定義することで、単純なプラグインを作成できます。ただし、このチュートリアルでは、API インターフェイスのリクエストをプラグインにカプセル化する方法を紹介します。まず、HTTP リクエストを処理するための一般的な JavaScript ライブラリである axios をインストールする必要があります。

npm install axios --save

次に、次のように API プラグインを作成します。

import axios from 'axios'

const ApiPlugin = {
install(Vue) {

Vue.prototype.$api = {
  get(url) {
    return axios.get(url)
  },
  post(url, data) {
    return axios.post(url, data)
  }
}

}
}

export default ApiPlugin

上記のコードでは、ApiPlugin プラグインを定義します。 Vue コンストラクターをパラメーターとして受け入れる install() メソッド。 $api 属性は install() メソッドで定義され、2 つのメソッド (get と post) を含むオブジェクトが Vue.prototype にアタッチされます。

2. プラグインの使用

API プラグインを作成したので、それを Vue.js アプリケーションで使用する必要があります。次のコードを使用して、プラグインを Vue.js アプリケーションに導入できます:

import Vue from 'vue'
import App from './App.vue'
import ApiPlugin from '。 / api-plugin'

Vue.use(ApiPlugin)

new Vue({
render: h => h(App),
}).$mount( ' #app')

上記のコードでは、まず import ステートメントを通じて ApiPlugin をアプリケーションに導入し、次に Vue.use() メソッドを使用してプラグインをインストールします。最後に、Vue インスタンスを作成し、 #app 要素にマウントします。これで、$api 属性を使用してアプリケーションで API リクエストを行うことができます。

3. API リクエストの送信

GET リクエストを送信して、返されたデータを取得するとします。これを実現するには、Vue コンポーネントの $api.get() メソッドを使用します。

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ message }}</h1>

16b28748ea4df4d9c2150843fecfba68
< ;/template>

3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {
name: 'App',
data() {

return {
  message: '',
}

},
async Mounted () {

const response = await this.$api.get('http://localhost:3000')
this.message = response.data.message

}
}
2cacc6d41bbb37262a98f745aa00fbf0

上記のコードでは、マウントされたフックで $api.get() メソッドを使用します。 http をリクエストする関数 GET リクエストを ://localhost:3000 に送信し、リクエストの完了後に返されたデータを message 属性に割り当ててテンプレートに表示します。

4. POST リクエストの送信

POST リクエストの送信は GET リクエストの送信と似ており、$api.post() の 2 番目のパラメータとしてデータを渡すだけです。メソッド ：

async submit() {
const data = { 名前: 'ジョン'、年齢: 30 }
const 応答 = await this.$api.post('http://localhost : 3000', data)
console.log(response.data)
}

上記のコードでは、submit() メソッドに 2 つの属性を含むデータ オブジェクトを作成しました。 $api.post() メソッドを呼び出すときの 2 番目のパラメーター。返されたデータをコンソールに出力します。

概要

このチュートリアルを学習すると、Vue.js プラグインを使用して API インターフェイス リクエストをカプセル化する方法を理解できるようになります。実際の開発では、API リクエストは通常​​、他の関数、コンポーネントなどと一緒に使用されます。適切なプラグインを作成することで、コードをより適切に整理して再利用できます。このチュートリアルが Vue.js 開発作業に役立つことを願っています。

以上がVUE3 入門チュートリアル: Vue.js プラグインを使用して API インターフェイス リクエストをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。