Permintaan Vue untuk lulus nilai

Vue ialah rangka kerja JavaScript popular yang digunakan untuk membangunkan aplikasi web berskala besar. Dalam Vue, terdapat banyak kaedah untuk melaksanakan permintaan HTTP dan menerima respons. Senario biasa ialah menghantar permintaan kepada pelayan dalam komponen Vue dan menghantar data tindak balas sebagai keadaan komponen. Dalam artikel ini, kami akan meneroka proses ini dan menyediakan beberapa contoh kod.

Pertama, mari kita lihat kaedah permintaan HTTP dalam Vue. Pustaka permintaan HTTP yang paling biasa digunakan dalam Vue ialah axios. axios ialah klien HTTP berasaskan Promise yang tersedia dalam penyemak imbas dan Node.js. axios dengan mudah boleh melaksanakan kaedah seperti GET, POST, PUT, dll. dan menyediakan sokongan yang baik untuk mendapatkan dan menghantar data daripada pelayan. Jika kita menggunakan axios sebagai perpustakaan permintaan dalam artikel ini.

Seterusnya mari kita lihat cara melaksanakan permintaan HTTP dalam komponen Vue.

1. Mengimport axios dalam komponen Vue

Untuk menggunakan axios, kita perlu mengimportnya ke dalam komponen. Dalam komponen Vue, anda boleh menggunakan kata kunci import untuk mengimport aksios. Berikut ialah contoh:

import axios from 'axios'

2. Laksanakan permintaan HTTP dalam komponen Vue

Kami boleh melaksanakan permintaan HTTP dalam fungsi cangkuk kitaran hayat komponen Vue, seperti fungsi cangkuk yang dicipta.

export default {
  created() {
    axios.get('http://example.com/api/data')
      .then(response => {
        console.log(response.data)
      })
  }
}

Dalam contoh ini, kami melaksanakan permintaan GET menggunakan axios dan mencetak data tindak balas pada konsol.

3. Lulus data respons sebagai keadaan komponen

Dalam Vue, kami boleh menggunakan pilihan data untuk memulakan keadaan komponen. Walau bagaimanapun, selepas melakukan permintaan HTTP dan mendapatkan data respons daripada pelayan, kami mungkin mahu mengurus data tersebut sebagai keadaan komponen. Untuk melakukan ini, kita boleh menentukan atribut data dalam komponen.

export default {
  data() {
    return {
      responseData: []
    }
  },
  created() {
    axios.get('http://example.com/api/data')
      .then(response => {
        this.responseData = response.data
      })
  }
}

Dalam contoh ini, kami mentakrifkan tatasusunan yang dipanggil responseData. Kemudian, dalam fungsi cangkuk yang dicipta, kami melaksanakan permintaan HTTP dan menetapkan data tindak balas yang diperoleh daripada pelayan kepada tatasusunan. Memandangkan responseData kini merupakan sebahagian daripada keadaan komponen, kami boleh menggunakannya dalam komponen untuk memaparkan paparan.

4. Gunakan data respons dalam templat

Salah satu ciri teras Vue ialah keupayaan untuk mengikat keadaan pada templat paparan. Kita boleh menggunakan data tindak balas dalam templat komponen Vue untuk memaparkan paparan.

<template>
  <div>
    <ul>
      <li v-for="item in responseData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

Dalam contoh ini, kami menggunakan arahan v-for Vue untuk menggelungkan setiap item dalam tatasusunan responseData dan menjadikannya sebagai elemen