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.
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.
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.
Andaikan kami ingin menghantar permintaan GET dan mendapatkan data yang dikembalikan. Kita boleh menggunakan kaedah $api.get() dalam komponen Vue untuk mencapai ini:
<h1>{{ message }}</h1>
< ;/template>
eksport lalai {
nama: 'App',
data() {
return {
message: '',
}},
async mounted () {
const response = await this.$api.get('http://localhost:3000')
this.message = response.data.message}
}
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.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
