Bagaimanakah vue meminta berbilang alamat pelayan?

Kata Pengantar

Dalam pembangunan bahagian hadapan, apabila kami menggunakan rangka kerja Vue, permintaan Ajax sering terlibat. Biasanya, antara muka yang perlu kami minta disediakan oleh pelayan yang sama. Tetapi dalam beberapa senario, kita perlu meminta beberapa alamat pelayan yang berbeza Sebagai contoh, apabila membangunkan aplikasi hibrid, kita perlu meminta beberapa pelayan yang berbeza untuk mendapatkan data. Artikel ini akan memperkenalkan cara meminta berbilang alamat pelayan dalam Vue.

Pilihan 1: Gunakan axios

axios ialah perpustakaan permintaan HTTP berasaskan Promise yang boleh digunakan dalam penyemak imbas dan node.js. Pustaka ajax yang disyorkan secara rasmi untuk Vue.js ialah axios.

Kami boleh memasang axios melalui npm dalam projek Vue:

npm install axios --save

Dalam penggunaan khusus, kami boleh menukar konfigurasi permintaan lalai dengan mengubah suai atribut lalai bagi axios. Di sini, kita boleh menukar alamat lalai permintaan dengan mengubah suai baseURL atribut lalai. Seperti yang ditunjukkan dalam kod berikut:

//创建axios实例
let instance = axios.create({
  baseURL: 'http://localhost:8080'
})

//第一个接口请求
instance.get('/api/employee')
  .then(function(response) {
    console.log(response.data)
  })
  .catch(function(error) {
    console.log(error)
  })

//第二个接口请求
instance.get('/api/company')
  .then(function(response) {
    console.log(response.data)
  })
  .catch(function(error) {
    console.log(error)
  })

Dalam kod di atas, kami mencipta contoh axios dan menetapkan alamat asas kepada http://localhost:8080 melalui atribut lalai, dan kemudian meminta /api/ masing-masing Terdapat dua antara muka: pekerja dan /api/syarikat.

Walau bagaimanapun, terdapat beberapa masalah dengan pendekatan ini. Jika kami meminta lebih banyak alamat pelayan, ia boleh menyebabkan lebihan kod. Di samping itu, jika kami memerlukan alamat yang diminta untuk ditentukan pada masa jalan, kaedah ini tidak boleh digunakan.

Pilihan 2: Gunakan async/wait

Dengan menggunakan async/wait, kami boleh meminta berbilang alamat pelayan yang berbeza dengan lebih ringkas. Berikut ialah contoh kod menggunakan async/wait:

async function loadData() {
  try {
    let employee = await axios.get('http://localhost:8080/api/employee')
    console.log(employee.data)

    let company = await axios.get('http://localhost:8081/api/company')
    console.log(company.data)
  } catch (error) {
    console.log(error)
  }
}

loadData()

Melalui async/waiit, kami boleh meminta berbilang alamat pelayan dengan sangat ringkas dalam kod. Walau bagaimanapun, terdapat juga beberapa masalah dengan pendekatan ini. Sebagai contoh, jika sejumlah besar alamat yang diminta digunakan, menggunakan async/wait boleh menyebabkan proses permintaan menjadi sangat perlahan.

Pilihan 3: Gunakan Promise.all

Kami juga boleh menggunakan kaedah Promise.all asli JavaScript untuk meminta berbilang alamat pelayan. Promise.all menerima tatasusunan objek Promise sebagai parameter, dan kemudian menunggu semua objek Promise diselesaikan sebelum mengembalikannya secara seragam.

Promise.all([
  axios.get('http://localhost:8080/api/employee'), 
  axios.get('http://localhost:8081/api/company')
])
.then(function(result) {
  console.log(result[0].data)
  console.log(result[1].data)
})
.catch(function(error) {
  console.log(error)
});

Kod di atas akan meminta dua alamat 'http://localhost:8080/api/employee' dan 'http://localhost:8081/api/company' pada masa yang sama, dan dalam kedua-dua Selepas semua permintaan telah berjaya dikembalikan, keputusan mereka adalah output.

Ringkasan

Di atas ialah tiga kaedah untuk meminta berbilang alamat pelayan dalam Vue. Setiap kaedah mempunyai kelebihan dan kekurangannya, dan kita boleh memilih kaedah yang paling sesuai dengan kita mengikut situasi tertentu. Dalam pembangunan, kita perlu menggunakan teknologi secara fleksibel mengikut keperluan sebenar untuk menyediakan pengguna dengan produk dan perkhidmatan yang cemerlang.

Atas ialah kandungan terperinci Bagaimanakah vue meminta berbilang alamat pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!