Apakah kegunaan await in vue?

Dalam vue, await bermaksud menunggu Kata kunci await hanya boleh diletakkan dalam fungsi async langkah dilaksanakan hanya selepas keputusan dikembalikan.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah kegunaan await dalam Vue

Mari kita bincangkan tentang penggunaan async dahulu. Ia diletakkan di hadapan fungsi sebagai kata kunci untuk menunjukkan bahawa fungsi itu adalah fungsi tak segerak , kerana async bermaksud asynchronous , fungsi asynchronous bermaksud bahawa pelaksanaan fungsi tidak akan menyekat pelaksanaan kod berikut. Tulis fungsi async

async function timeout() {
　　return 'hello world';
}

Sintaksnya sangat mudah. ​​Cuma tambahkan kata kunci async di hadapan fungsi untuk menunjukkan bahawa ia tidak segerak. Fungsi async juga merupakan fungsi Kita boleh menggunakannya seperti biasa kita boleh memanggilnya secara langsung dengan kurungan Untuk menunjukkan bahawa ia tidak menyekat pelaksanaan kod di belakangnya, kita menambah ayat

console.log;
async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

<🎜 selepas panggilan fungsi async > Buka konsol penyemak imbas, kita lihat

Tamat masa fungsi async dipanggil, tetapi tidak ada output 'Jangan risau, lihat apa yang dikembalikan oleh pelaksanaan masa tamat()? Tukar pernyataan timeout() di atas kepada console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');

Teruskan melihat konsol

Ternyata fungsi async mengembalikan Ia adalah objek janji Jika kita ingin mendapatkan nilai pulangan janji, kita harus menggunakan kaedah kemudian dan terus mengubah suai kod

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

Lihat konsol

Kami "hello world' diperoleh, dan pelaksanaan tamat masa tidak menyekat pelaksanaan kod berikut, yang konsisten dengan apa yang baru kami katakan.

Pada masa ini masa, anda mungkin menyedari bahawa Janji dalam konsol telah diselesaikan, iaitu async Prinsip pelaksanaan dalaman fungsi Jika terdapat nilai yang dikembalikan dalam fungsi async, apabila fungsi dipanggil, kaedah Promise.solve(). akan dipanggil secara dalaman untuk menukarnya menjadi objek janji sebagai pemulangan, tetapi bagaimana jika ralat dilemparkan secara dalaman dalam fungsi tamat masa Kemudian Promise.reject() akan dipanggil untuk mengembalikan objek janji pada masa ini fungsi

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

Konsol adalah seperti berikut:

Jika fungsi Ralat dilemparkan secara dalaman, dan objek promise mempunyai kaedah tangkapan untuk menangkap ia.

timeout(false).catch(err => {
    console.log(err)
})

Kata kunci async sudah hampir ada. tetapi kami lebih cenderung untuk meletakkan ungkapan yang mengembalikan objek janji. Harap maklum bahawa kata kunci await hanya boleh diletakkan dalam fungsi async

Sekarang tulis fungsi, Biarkan ia mengembalikan objek janji fungsi adalah untuk mendarab nilai dengan 2 selepas 2s

// 2s 之后返回双倍的值

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

Sekarang tulis fungsi async supaya anda boleh menggunakan kata kunci await Apa yang diletakkan selepas tunggu ialah pengembalian Ungkapan objek janji , jadi ia boleh diikuti dengan panggilan fungsi doubleAfter2seconds

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
testResult();

Buka konsol, dan selepas 2s, 60 adalah output

Sekarang mari kita lihat pelaksanaan proses kod , panggil fungsi testResult, ia bertemu menunggu, menunggu bermakna tunggu, kod akan dijeda di sini, dan tidak akan dilaksanakan lagi Tunggu objek janji berikutnya selesai dilaksanakan, dan kemudian dapatkan nilainya janji selesai. dan pulangan Selepas nilai pulangan diperoleh, ia terus melaksanakan ke bawah Secara khusus, selepas menghadapi menunggu, kod menjeda pelaksanaan dan menunggu untuk doubleAfter2seconds(30) untuk menyelesaikan pelaksanaan laksanakan. Selepas 2 saat, janji diselesaikan dan mengembalikan nilai 60. Pada masa ini, tunggu mendapat nilai pulangan 60 dan menetapkannya kepada keputusan Selepas jeda tamat, kod mula meneruskan pelaksanaan dan melaksanakan console.log kenyataan.

Dengan fungsi ini, kita mungkin tidak melihat peranan async/menunggu Bagaimana jika kita ingin mengira nilai 3 nombor dan kemudian mengeluarkan nilai yang diperoleh?

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

Enam saat kemudian, konsol mengeluarkan 220. Kita dapat melihat bahawa menulis kod tak segerak sama seperti menulis kod segerak dan tiada kawasan panggil balik lagi.

Nota:

async dan menunggu adalah berdasarkan janji. Fungsi yang menggunakan async akan sentiasa mengembalikan objek janji. Adalah penting untuk diingat bahawa ini mungkin tempat biasa untuk anda melakukan kesilapan.

Apabila menggunakan await, kami menjeda fungsi, bukan keseluruhan kod.

async dan menunggu tidak disekat.

Anda masih boleh menggunakan Promise seperti Promise.all().

[Cadangan berkaitan: "

tutorial vue.js"]

Atas ialah kandungan terperinci Apakah kegunaan await in vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!