Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum permintaan antara muka API

Vue.js ialah salah satu rangka kerja bahagian hadapan yang lebih popular pada masa ini Vue3 ialah versi terkini Vue.js, yang menyediakan sintaks yang lebih mudah dan prestasi yang lebih baik. Dalam pembangunan Vue.js, permintaan data adalah bahagian penting, dan permintaan antara muka API juga merupakan salah satu tugas biasa pengaturcara. Tutorial ini akan memperkenalkan secara terperinci cara menggunakan pemalam Vue.js untuk merangkum permintaan antara muka API.

Apakah pemalam Vue.js?

Dalam Vue.js, pemalam ialah modul berfungsi yang boleh menyediakan fungsi peringkat global untuk aplikasi Vue.js. Kami boleh merangkum fungsi dalam pemalam dan menyuntik sifat, arahan, komponen dan banyak lagi ke dalam aplikasi Vue.js. Vue.js secara rasmi menyediakan beberapa pemalam biasa untuk kami gunakan, seperti Penghala Vue dan Vuex Sudah tentu, kami juga boleh menulis pemalam kami sendiri untuk mencapai fungsi yang kami perlukan.

1. Mencipta pemalam

Kami boleh mencipta pemalam mudah dengan mentakrifkan fungsi atau sifat global. Tetapi dalam tutorial ini, kami akan memperkenalkan cara untuk merangkum permintaan antara muka API dalam pemalam. Pertama, kita perlu memasang axios, iaitu perpustakaan JavaScript yang popular untuk mengendalikan permintaan HTTP.

npm pasang axios --save

Kemudian, kami mencipta pemalam API seperti berikut:

import axios daripada 'axios'

const ApiPlugin = {
pasang(Vue) {

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

}
}

eksport lalai ApiPlugin

Dalam kod di atas, kami mentakrifkan pemalam ApiPlugin, Ia mengandungi kaedah install() yang menerima pembina Vue sebagai parameter. Atribut $api ditakrifkan dalam kaedah install() dan objek yang mengandungi dua kaedah (get dan post) dilampirkan pada Vue.prototype.

2. Menggunakan pemalam

Sekarang kami telah mencipta pemalam API, kami perlu menggunakannya dalam aplikasi Vue.js kami. Kita boleh menggunakan kod berikut untuk memperkenalkan pemalam ke dalam aplikasi Vue.js:

import Vue daripada 'vue'
import Apl daripada './App.vue'
import ApiPlugin daripada '. / api-plugin'

Vue.use(ApiPlugin)

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

Dalam kod di atas, kami mula-mula memperkenalkan ApiPlugin ke dalam aplikasi melalui pernyataan import, dan kemudian menggunakan kaedah Vue.use() untuk memasang pemalam. Akhir sekali, kami mencipta tika Vue dan melekapkannya pada elemen #app. Sekarang, kita boleh menggunakan atribut $api untuk membuat permintaan API dalam aplikasi kita.

3. Hantar permintaan API

Andaikan kami ingin menghantar permintaan GET dan mendapatkan data yang dikembalikan. Kita boleh menggunakan kaedah $api.get() dalam komponen Vue untuk mencapai ini:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68
< ;/template>

855348821b2e8f2cc4b633bf98f064df
eksport lalai {
nama: 'App',
data() {

return {
  message: '',
}

},
async mounted () {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Dalam kod di atas, kami menggunakan kaedah $api.get() dalam cangkuk yang dipasang fungsi untuk meminta http Hantar permintaan GET ke ://localhost:3000 dan tetapkan data yang dikembalikan kepada atribut mesej selepas permintaan selesai untuk memaparkannya dalam templat.

4. Hantar permintaan POST

Menghantar permintaan POST adalah serupa dengan menghantar permintaan GET, cuma hantar data sebagai parameter kedua $api.post() kaedah ：

async submit() {
const data = { name: 'John', umur: 30 }
const response = tunggu ini.$api.post('http://localhost : 3000', data)
console.log(response.data)
}

Dalam kod di atas, kami mencipta objek data yang mengandungi dua atribut dalam kaedah submit(). parameter kedua apabila memanggil kaedah $api.post(). Kami mencetak data yang dikembalikan ke konsol.

Ringkasan

Dengan mempelajari tutorial ini, anda kini seharusnya memahami cara menggunakan pemalam Vue.js untuk merangkum permintaan antara muka API. Dalam pembangunan sebenar, permintaan API biasanya digunakan bersama-sama dengan fungsi lain, komponen, dll. Kami boleh mengatur dan menggunakan semula kod dengan lebih baik dengan mencipta pemalam yang sesuai. Saya harap tutorial ini dapat membantu anda dengan kerja pembangunan Vue.js anda.

Atas ialah kandungan terperinci Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum permintaan antara muka API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!