vue tunggu permintaan gelung

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna web interaktif. Apabila menggunakan Vue, anda selalunya perlu melakukan operasi tak segerak, seperti menghantar permintaan HTTP untuk mendapatkan data atau melaksanakan tugas yang memakan masa. Dalam kes di mana operasi tak segerak ini memerlukan menunggu permintaan kitaran, Vue menyediakan pelbagai kaedah untuk mengurus permintaan ini dengan berkesan.

1. Apakah permintaan gelung menunggu?

Menunggu permintaan gelung bermakna apabila melakukan operasi gelung, anda perlu menunggu data dipulangkan sebelum meneruskan dengan gelung seterusnya. Keadaan ini sangat biasa dalam aplikasi web Contohnya, apabila anda perlu mendapatkan data dalam kelompok atau melakukan operasi pemprosesan kelompok, anda mungkin perlu menunggu permintaan kitaran.

2. Mengapa anda perlu menunggu permintaan kitaran?

Dalam aplikasi web, pemprosesan dan pembentangan data selalunya tidak segerak. Jika anda perlu melakukan pemprosesan atau paparan yang sama pada set data, maka operasi gelung adalah cara yang sangat biasa. Walau bagaimanapun, jika jumlah set data ini sangat besar, atau operasi pemprosesan atau paparan data sangat memakan masa, maka mungkin perlu menunggu permintaan kitaran.

3. Bagaimana untuk membuat permintaan gelung menunggu?

Vue menyediakan pelbagai kaedah untuk mengurus permintaan gelung tunggu dengan berkesan, yang diperincikan di bawah.

1. Promise.all

Kaedah Promise.all menerima tatasusunan objek Promise sebagai parameter dan mengembalikan objek Promise baharu. Hanya apabila semua objek Promise selesai atau salah satu daripadanya gagal, hasil yang sepadan boleh diperolehi dalam kaedah then or catch. Dalam permintaan gelung menunggu, kita boleh membungkus operasi yang perlu digelung dengan Promise, dan kemudian menggunakan kaedah Promise.all untuk menunggu keputusan pelaksanaan semua objek Promise.

Berikut ialah contoh mudah:

let promises = []
for (let i = 0; i < 5; i++) {
  promises.push(
    Axios.get('http://httpbin.org/get', {
      params: {
        id: i
      }
    })
  )
}

Promise.all(promises)
  .then(result => {
    console.log('请求完成', result)
  })
  .catch(error => {
    console.log('请求出错', error)
  })

Dalam contoh di atas, kami menghantar lima permintaan HTTP GET, menggunakan kaedah Promise.all untuk menunggu semua permintaan selesai. Apabila semua permintaan selesai, kami akan mendapat semua hasil permintaan dalam fungsi panggil balik kemudian dan mencetaknya.

2. async/wait

async/wait ialah penyelesaian pengaturcaraan tak segerak yang diperkenalkan dalam ES7 untuk memudahkan penggunaan Promise. Menggunakan async / await boleh menjadikan kod asynchronous kelihatan seperti kod segerak, meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Dalam permintaan gelung tunggu, kita boleh menulis operasi gelung sebagai fungsi async dan menggunakan kata kunci await untuk menunggu keputusan setiap gelung.

Berikut ialah contoh mudah:

async function getRequests () {
  for (let i = 0; i < 5; i++) {
    let response = await Axios.get('http://httpbin.org/get', {
      params: {
        id: i
      }
    })
    console.log('请求完成', response.data)
  }
}

getRequests()

Dalam contoh di atas, kami menggunakan fungsi async untuk merangkum lima permintaan HTTP GET dan menggunakan kata kunci await untuk menunggu keputusan setiap permintaan . Apabila setiap permintaan selesai, kami akan memproses logik yang sepadan dalam kod, seperti mencetak hasil permintaan.

3. Fungsi penjana

Fungsi Penjana ialah jenis fungsi baharu yang diperkenalkan dalam ES6, yang boleh digunakan untuk mengawal susunan pelaksanaan fungsi. Dalam permintaan gelung tunggu, kita boleh menulis operasi gelung sebagai fungsi Penjana dan menggunakan kata kunci hasil untuk menunggu keputusan setiap gelung.

Berikut ialah contoh mudah:

function *getRequests () {
  for (let i = 0; i < 5; i++) {
    let response = yield Axios.get('http://httpbin.org/get', {
      params: {
        id: i
      }
    })
    console.log('请求完成', response.data)
  }
}

let iterator = getRequests()
let result = iterator.next()

while (!result.done) {
  result.value.then(response => {
    result = iterator.next(response)
  })
}

Dalam contoh di atas, kami menggunakan fungsi Generator untuk merangkum lima permintaan HTTP GET dan menggunakan kata kunci hasil untuk menunggu keputusan setiap permintaan. Apabila setiap permintaan selesai, kami akan memproses logik yang sepadan dalam kod, seperti mencetak hasil permintaan.

4. Ringkasan

Permintaan gelung menunggu adalah sangat biasa dalam aplikasi web dan mengendalikan permintaan gelung menunggu dalam Vue juga sangat mudah. Dengan menggunakan kaedah Promise.all, async/wait, fungsi Generator dan kaedah lain, kami boleh mengurus permintaan gelung tunggu dengan berkesan dan mengoptimumkan kebolehbacaan dan kebolehselenggaraan kod. Sudah tentu, dalam amalan, kita perlu memilih kaedah yang paling sesuai berdasarkan keperluan dan senario tertentu.

Atas ialah kandungan terperinci vue tunggu permintaan gelung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!