Cara membuat panggilan antara muka dalam Vue

Dalam pembangunan web moden, panggilan antara muka adalah fungsi yang sangat biasa. Vue ialah rangka kerja JavaScript bahagian hadapan Sebagai rangka kerja MVVM, ia merangkumi banyak sokongan untuk panggilan antara muka, memudahkan pembangun membuat panggilan antara muka. Artikel ini akan memperkenalkan cara membuat panggilan antara muka dalam Vue.

1. Pasang axios

axios ialah perpustakaan HTTP berasaskan Promise yang popular yang boleh digunakan dalam penyemak imbas dan Node.js. Ia boleh membantu kami membuat panggilan antara muka dalam Vue dengan mudah. Untuk menggunakan axios, kita perlu memasangnya ke dalam projek terlebih dahulu.

Buka terminal dalam direktori akar projek Vue dan laksanakan arahan berikut:

npm install axios --save

2 Buat panggilan antara muka

Dalam komponen Vue, anda boleh menentukan cara kaedah untuk melaksanakan panggilan antara muka. Berikut ialah contoh penggunaan axios untuk memanggil antara muka.

methods: {
  getUser() {
    axios.get('/api/user')
      .then(response => {
         //处理响应
         console.log(response.data);
      })
      .catch(error => {
         //处理错误
         console.log(error);
      });
  }
}

Kod di atas menunjukkan contoh mendapatkan maklumat pengguna. Kaedah axios.get menghantar permintaan GET dan /api/user ialah alamat antara muka. Apabila panggilan antara muka berjaya, kami menyimpan badan tindak balas (iaitu, data yang dikembalikan oleh antara muka) dalam pembolehubah response untuk pemprosesan apabila ralat berlaku, kami menyimpan maklumat ralat dalam pembolehubah error untuk diproses .

3. Konfigurasikan axios

Selain permintaan GET asas, kami juga boleh menggunakan axios untuk menghantar jenis permintaan lain seperti POST, PUT, DELETE, dll. Kami juga boleh menambah pengepala, isi permintaan dan maklumat lain pada permintaan itu. Untuk melakukan ini, kita perlu mengkonfigurasi axios dalam projek Vue.

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

Kod di atas menunjukkan contoh konfigurasi aksios. axios.defaults.baseURL menentukan alamat permintaan lalai bagi axios. axios.defaults.headers.common dan axios.defaults.headers.post konfigurasikan maklumat pengepala lalai untuk setiap permintaan dan permintaan POST masing-masing.

4. Gunakan data antara muka dalam komponen Vue

Selepas memanggil antara muka, biasanya kita perlu memaparkan data yang dikembalikan oleh antara muka dalam komponen Vue. Untuk melakukan ini, kita perlu menyimpan data ke dalam objek data dalam contoh Vue.

data() {
   return {
      user: {}
   }
},
mounted() {
   this.getUser();
},
methods: {
   getUser() {
      axios.get('/api/user')
         .then(response => {
            this.user = response.data;
         })
         .catch(error => {
            console.log(error);
         });
   }
}

Kod di atas menunjukkan contoh komponen Vue yang memaparkan maklumat pengguna. Dalam objek data, pembolehubah bernama user ditakrifkan untuk menyimpan data yang dikembalikan oleh antara muka. Dalam permintaan ajax, apabila data dikembalikan, kami menyimpan data dalam objek data dalam contoh Vue dan memaparkannya dalam templat.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara membuat panggilan antara muka dalam Vue. Kami boleh melaksanakan panggilan antara muka dengan mudah dengan memasang axios dan mengkonfigurasi nilai lalainya. Dalam komponen Vue, kita boleh menyimpan data yang dikembalikan oleh antara muka ke dalam contoh Vue dan memaparkannya dalam templat. Ini membolehkan kami mendapatkan dan mengurus data dengan mudah, serta meningkatkan kecekapan pembangunan aplikasi Web.

Atas ialah kandungan terperinci Cara membuat panggilan antara muka dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!