Cara fungsi asynchronous untuk vue

Terdapat tiga cara untuk menangani operasi tak segerak di VUE: Tulis fungsi asynchronous menggunakan async/menunggu, membolehkan anda menulis kod segerak dalam fungsi dan tunggu operasi tak segerak selesai. Menulis fungsi asynchronous menggunakan kemudian/tangkapan membolehkan pemprosesan hasil operasi tak segerak dan melaksanakan kod apabila selesai atau gagal. Di Vuex, tindakan digunakan untuk melakukan operasi tak segerak, tindakan adalah fungsi yang menghantar permintaan tak segerak sebelum mengemukakan mutasi.

Cara Menulis Fungsi Asynchronous di Vue

Dalam vue.js, pengendalian operasi tak segerak biasanya memerlukan penggunaan fungsi tak segerak. Fungsi asynchronous membolehkan kami menulis kod yang melaksanakan serentak tanpa menyekat gelung acara penyemak imbas.

Menggunakan async/menunggu

Menggunakan async/menunggu adalah cara paling mudah untuk menulis fungsi asynchronous di Vue. Sintaks Async/menunggu kami menulis kod segerak dalam fungsi dan tunggu operasi tak segerak selesai.

 <code class="javascript">// 异步函数获取数据async function fetchData() { // 使用fetch API 发起请求const response = await fetch('https://example.com/api/data'); // 等待响应并解析JSON 数据const data = await response.json(); // 返回数据return data; }</code>

Gunakan kemudian/tangkapan

Jika anda tidak boleh menggunakan async/menunggu, anda boleh menggunakan sintaks kemudian/menangkap untuk menulis fungsi asynchronous. Kemudian/Catch membolehkan anda mengendalikan hasil operasi tak segerak dan melaksanakan kod apabila dilakukan atau gagal.

 <code class="javascript">// 异步函数获取数据function fetchData() { // 使用fetch API 发起请求return fetch('https://example.com/api/data') .then(response => response.json()) // 处理响应并解析JSON 数据.catch(error => console.error(error)); // 处理错误}</code>

Menggunakan tindakan VUEX

Di Perpustakaan Pengurusan Negeri VUEX, tindakan digunakan untuk melakukan operasi tak segerak. Tindakan adalah fungsi yang menghantar permintaan tak segerak sebelum mengemukakan mutasi.

 <code class="javascript">// Vuex action 获取数据const actions = { async fetchData({ commit }) { const response = await fetch('https://example.com/api/data'); const data = await response.json(); // 提交突变以存储数据commit('setData', data); } };</code>

Amalan terbaik

• Elakkan menggunakan fungsi asynchronous dalam templat, kerana ini memberi kesan kepada respons Vue.
• Panggil fungsi asynchronous di lokasi yang sesuai, seperti objek kitaran hayat yang dipasang komponen atau objek Kaedah.
• Gunakan blok cuba/menangkap untuk mengendalikan ralat.
• Pastikan fungsi asynchronous mengembalikan objek janji atau menggunakan sintaks async/menunggu.

Atas ialah kandungan terperinci Cara fungsi asynchronous untuk vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!