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: