Bagaimana Menunggu dan Mengembalikan Nilai daripada Fungsi Async dalam JavaScript?

Cara Menunggu dan Mengembalikan Nilai daripada Fungsi Async

Apabila bekerja dengan fungsi async, nilai yang dikembalikan boleh berbeza daripada fungsi segerak. Dalam artikel ini, kami akan meneroka cara mengendalikan tingkah laku ini menggunakan async-await.

Masalah:

Andaikan anda mempunyai fungsi async getData yang mengambil data daripada API menggunakan Axios. Untuk mendapatkan semula data dan melognya, anda cuba kod berikut:

const axios = require('axios');
async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}
console.log(getData());

Walau bagaimanapun, daripada mengelog data, anda mendapat Janji dengan keadaan belum selesai.

Penyelesaian :

Isunya di sini ialah anda cuba menunggu hasil daripada fungsi async di luar async skop. Untuk membetulkan perkara ini, anda perlu merangkum console.log dalam IIFE async (Ungkapan Fungsi Segera Dikenakan):

async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}

(async () => {
    const result = await getData();
    console.log(result);
})();

Corak ini membolehkan anda menunggu hasil fungsi getData dalam skop async.

Sintaks Alternatif:

Jika fungsi async anda tidak bergantung pada mengembalikan janji (cth., Axios mengembalikan janji), anda boleh memudahkan sintaks dengan mengalih keluar async dan menunggu kata kunci daripada getData.

function getData() {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}

Kemudian, gunakan struktur IIFE yang sama seperti sebelumnya untuk menunggu keputusan:

(async () => {
    console.log(await getData());
})();

Lagi Maklumat:

Untuk butiran lanjut tentang pengaturcaraan tak segerak/menunggu dan tak segerak dalam JavaScript, rujuk sumber berikut:

• [Async/Await in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function)
• [Asynchronous Programming in JavaScript](https://javascript.info/ async-menunggu)

Atas ialah kandungan terperinci Bagaimana Menunggu dan Mengembalikan Nilai daripada Fungsi Async dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!