Janji JavaScript && Ambil

Mary-Kate Olsen
Lepaskan: 2024-10-09 18:26:02
asal
651 orang telah melayarinya

JavaScript Promises && Fetch

Janji

Restoran

Janji dalam JavaScript hanyalah tugas yang belum selesai. Ia seperti memesan makanan di restoran: apabila anda membuat pesanan anda, pelayan membuat janji untuk membawa makanan yang anda pesan. Setelah makanan dibawa ke meja, janji telah ditunaikan. Jika makanan yang anda pesan tidak boleh dihidangkan kerana dapur kehabisan bahan utama, maka anda boleh menangkap hidangan di tempat lain.

Ini semua tak segerak. Apabila anda duduk di meja, anda mungkin berbual dengan rakan atau menatal pada telefon anda. Anda jeda apa yang anda lakukan supaya anda boleh memberikan pesanan anda kepada pelayan, kemudian kembali melakukan perkara yang anda lakukan sebelum ini.

Janji JavaScript berfungsi sama. Memandangkan JavaScript adalah satu benang, janji membenarkan enjin JavaScript beralih kepada tugas lain sementara ia menunggu operasi tertentu selesai.

JavaScript

Janji ialah jenis objek tertentu. Semua janji bermula dalam keadaan tertunda. Fungsi panggil balik dalam janji, dipanggil pelaksana, mentakrifkan masa untuk menyelesaikan atau menolak janji.

Mencipta janji:

const order = new Promise((resolve, reject) => {
  if ( foodDelivered) {
    resolve('eat food');
  } else {
    reject('find another restaurant');
  }
})
Salin selepas log masuk

Menggunakan janji

order
  // wait for the asynchronous value to be fulfilled
  .then(value => console.log(value))
  // handle rejection
  .catch(error => console.log(error))
  .finally(() => console.log('all done'));
Salin selepas log masuk

Ambil

fetch ialah fungsi terbina dalam dalam JavaScript yang mengembalikan janji. Ia membuat permintaan HTTP dan membolehkan anda mengendalikan respons secara tidak segerak dengan .then() dan .catch().

Menggunakan fetch()

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
  .finally(() => console.log('all done');
Salin selepas log masuk

Timbunan Panggilan dan Gelung Peristiwa

tindanan panggilan mengurus tugasan segerak, menjejaki tertib yang mereka laksanakan. Ini agak mudah: tugasan dilaksanakan mengikut susunan yang ditulis.

Walau bagaimanapun, tugasan tak segerak dikendalikan oleh gelung acara. Gelung peristiwa membenarkan kod tak segerak dilaksanakan dalam keadaan tidak teratur, membenarkan enjin JavaScript terus bekerja pada tugas lain tanpa menunggu.

Contoh

Bagaimana ini akan dilaksanakan?

console.log("console log first!");
setTimeout( _ => console.log("set timeout second!"), 0);
Promise.resolve().then(() => console.log("promise third"));
console.log("console log last!!!");
Salin selepas log masuk

Anda mungkin menjangkakan ia akan dilaksanakan mengikut tertib, tetapi tidak. Gelung peristiwa JavaScript memproses arahan ini secara berbeza.
Hasilnya sebenarnya begini:

> console log first!
> console log last!!!
> promise third
> set timeout second!
Salin selepas log masuk

kenapa?

Gelung acara menyusun semula keutamaan pelaksanaan:

  1. Tugas segerak (seperti console.log("log konsol dahulu!") dan console.log("log konsol terakhir!!!")) dilaksanakan serta-merta, mengikut susunan yang dipaparkan.
  2. Microtasks (seperti panggilan balik Promise) diberi keutamaan seterusnya dan dilaksanakan sebelum sebarang tugas tak segerak yang lain.
  3. Tugas makro (seperti setTimeout) dikendalikan terakhir, walaupun tamat masa ditetapkan kepada sifar.

Ini membolehkan enjin JavaScript berfungsi secara tidak segerak, melaksanakan tugas lain tanpa menunggu semua operasi selesai serta-merta.


Foto Muka Depan oleh Andrew Petrov di Unsplash

Atas ialah kandungan terperinci Janji JavaScript && Ambil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan