Di manakah permintaan rangkaian vue ditulis?

Vue ialah rangka kerja bahagian hadapan yang memberikan kami banyak sokongan yang kami perlukan semasa pembangunan, salah satunya ialah sokongan untuk permintaan rangkaian. Permintaan rangkaian Vue boleh dilaksanakan menggunakan perpustakaan pihak ketiga Axios atau perpustakaan Ajax Vue sendiri. Apabila memilih kaedah yang hendak digunakan, kita perlu mempertimbangkan keadaan sebenar projek. Artikel ini akan memperkenalkan pelaksanaan permintaan rangkaian dalam Vue dan meringkaskan amalan terbaik.

Axios

Axios ialah klien HTTP berasaskan Promise yang boleh kami gunakan dalam projek Vue untuk membuat permintaan rangkaian. Contoh kod menggunakan Axios untuk menghantar permintaan GET adalah seperti berikut:

import axios from 'axios'

axios.get('/api/posts')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Contoh kod menggunakan Axios untuk menghantar permintaan POST adalah seperti berikut:

import axios from 'axios'

axios.post('/api/posts', {
  title: 'test',
  content: 'test content'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Contoh kod menggunakan Axios untuk menghantar permintaan PUT adalah seperti berikut:

import axios from 'axios'

axios.put('/api/posts/1', {
  title: 'test',
  content: 'test content'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Axios juga menyediakan kaedah lain, seperti DELETE, PATCH, dll, yang boleh dipilih mengikut keperluan projek. Dalam konfigurasi Axios, kami boleh menentukan pengepala, tamat masa dan beberapa item konfigurasi lain untuk memenuhi keperluan projek kami. Kita boleh mengkonfigurasinya mengikut situasi sebenar. Axios ialah perpustakaan permintaan rangkaian yang sangat mudah digunakan yang kini digunakan secara meluas dalam projek Vue.

Vue Ajax

Vue Ajax ialah perpustakaan Ajax yang disertakan dengan Vue Ia menyediakan pemalam Vue yang boleh menggunakan Vue.prototype.$http untuk membuat permintaan Ajax. Contoh kod untuk menggunakan Vue Ajax untuk membuat permintaan GET adalah seperti berikut:

Vue.http.get('/api/posts')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Contoh kod untuk menggunakan Vue Ajax untuk membuat permintaan POST adalah seperti berikut:

Vue.http.post('/api/posts', {
  title: 'test',
  content: 'test content'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Contoh kod untuk menggunakan Vue Ajax untuk membuat permintaan PUT adalah seperti berikut:

Vue.http.put('/api/posts/1', {
  title: 'test',
  content: 'test content'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Vue Ajax juga menyediakan kaedah lain, seperti DELETE, PATCH, dsb., yang serupa dengan kaedah Axios. Vue Ajax boleh melakukan konfigurasi global dan konfigurasi tempatan boleh ditetapkan dengan Vue.http.options.goods. Pustaka Vue Ajax lebih ringan daripada Axios, tetapi ia tidak mempunyai API Axios yang kaya.

Amalan Terbaik

Apabila memilih perpustakaan permintaan rangkaian, kita perlu mempertimbangkan situasi sebenar projek, dan kemudian memilih kaedah permintaan rangkaian yang paling sesuai untuk projek itu. Axios dan Vue Ajax kedua-duanya adalah pilihan yang hebat. Jika anda memerlukan API yang kaya dan mempunyai sejumlah besar permintaan rangkaian, Axios ialah pilihan yang lebih baik. Jika anda memerlukan perpustakaan Ajax yang ringan dan tidak mempunyai terlalu banyak permintaan rangkaian, Vue Ajax ialah pilihan yang baik.

Sebelum membuat permintaan rangkaian, sebaiknya gunakan permintaan tak segerak untuk pemuatan data dalam kitaran hayat Vue. Dengan menggunakan fungsi cangkuk, kita boleh membuat permintaan rangkaian apabila komponen dibuat. Contohnya adalah seperti berikut:

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    this.getPosts()
  },
  methods: {
    getPosts() {
      Vue.http.get('/api/posts')
        .then((response) => {
          this.posts = response.data
        })
    }
  }
}

Dalam kod di atas, kami memanggil kaedah getPosts dalam fungsi cangkuk yang dicipta, yang menghantar permintaan GET menggunakan Vue Ajax. Selepas berjaya mendapatkan data, kaedah ini memberikan data kepada atribut data komponen.

Ringkasan

Permintaan rangkaian Vue adalah sangat penting. Kami boleh menggunakan Axios atau Vue Ajax untuk membuat permintaan rangkaian. Apabila memilih permintaan rangkaian, anda perlu membuat pilihan berdasarkan keperluan projek anda. Sebelum menghantar permintaan, sebaiknya buat permintaan tak segerak dalam kitaran hayat Vue untuk pemuatan data. Menggunakan amalan terbaik boleh membantu kami membuat permintaan rangkaian yang lebih baik dan meningkatkan prestasi aplikasi Vue.

Atas ialah kandungan terperinci Di manakah permintaan rangkaian vue ditulis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!