Cara menggunakan fungsi permintaan tak segerak dalam dokumentasi Vue

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang popular yang menyediakan cara untuk membina antara muka pengguna dalam aplikasi. Dalam dokumentasi Vue.js, kami boleh menemui banyak maklumat berguna, terutamanya tentang cara menggunakan fungsi permintaan tak segerak.

Fungsi permintaan tak segerak ialah cara untuk melaksanakan tugas tak segerak dalam aplikasi. Ia digunakan untuk mendapatkan data daripada pelayan, memproses input, mengesahkan borang, dsb. Secara amnya, fungsi permintaan tak segerak perlu digunakan bersama-sama dengan ciri bahasa JavaScript seperti Promise, async dan await.

Dalam Vue.js, kami boleh menggunakan perpustakaan pihak ketiga seperti axios atau fetch untuk melaksanakan permintaan tak segerak. axios ialah klien HTTP yang membolehkan kami menghantar permintaan tak segerak dan mengendalikan respons dengan mudah. fetch juga merupakan klien HTTP, yang dilaksanakan menggunakan API Ambil asli JavaScript.

Untuk menggunakan axios dalam Vue.js, anda perlu memasang axios dalam projek dahulu:

npm install axios --save

Selepas pemasangan selesai, kod sampel untuk menggunakan axios dalam komponen Vue.js ialah seperti berikut:

import axios from 'axios'

export default {
  data () {
    return {
      posts: []
    }
  },
  mounted () {
    axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {
      this.posts = response.data
    })
  }
}

Dalam kod di atas, kami menggunakan kaedah get axios untuk menghantar permintaan ke https://jsonplaceholder.typicode.com/posts, dan selepas permintaan itu berjaya, data respons ialah diperuntukkan kepada atribut jawatan komponen.

Selain kaedah get, axios juga menyediakan kaedah permintaan lain seperti post, put, delete dan lain-lain, yang boleh digunakan mengikut keperluan sebenar.

Sebaliknya, kod sampel untuk menggunakan fetch untuk melaksanakan permintaan tak segerak adalah seperti berikut:

export default {
  data () {
    return {
      posts: []
    }
  },
  mounted () {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        this.posts = data
      })
  }
}

Dalam kes ini, kami menggunakan kaedah ambil untuk menghantar permintaan dan menggunakan kemudian kaedah untuk memproses respons, menghantar data respons Parse ia ke dalam format JSON dan tetapkan kepada atribut siaran komponen.

Apabila menggunakan axios atau fetch, kami juga boleh menggunakan async dan menunggu sintaks untuk mengendalikan operasi tak segerak. Ini menjadikan kod lebih mudah dibaca dan ringkas. Sebagai contoh, tulis semula kod sampel axios di atas menggunakan async dan tunggu seperti berikut:

async mounted () {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
  this.posts = response.data
}

Dalam kod di atas, kami menggunakan async dan menunggu sintaks untuk memudahkan pemprosesan operasi tak segerak.

Perlu diambil perhatian bahawa apabila menggunakan axios atau fetch untuk membuat permintaan tak segerak, anda perlu mengambil kira ralat atau kegagalan permintaan. Untuk mengendalikan situasi ini, anda boleh menggunakan sintaks try/catch untuk mengendalikan pengecualian dalam aksios Kod sampel adalah seperti berikut:

async mounted () {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
    this.posts = response.data
  } catch (error) {
    console.log(error)
  }
}

Dalam pengambilan, kita boleh menggunakan kaedah tangkapan untuk mengendalikan pengecualian:

mounted () {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => {
      this.posts = data
    })
    .catch(error => {
      console.log(error)
    })
}

Jumlah Secara umumnya, dokumentasi Vue.js menyediakan banyak kaedah berguna untuk menggunakan fungsi permintaan tak segerak Kita boleh memilih cara yang sesuai untuk mengendalikan tugas tak segerak mengikut keperluan sebenar.

Atas ialah kandungan terperinci Cara menggunakan fungsi permintaan tak segerak dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!