Rumah > hujung hadapan web > tutorial js > async / menunggu

async / menunggu

Barbara Streisand
Lepaskan: 2024-10-10 06:24:30
asal
890 orang telah melayarinya

async / await

async / menunggu

async / await ialah cara yang lebih baharu untuk menulis kod tak segerak berbanding janji. Kelebihan utama async/wait ialah kebolehbacaan yang dipertingkatkan dan mengelakkan perantaian janji. Janji boleh menjadi panjang, sukar dibaca dan mungkin mengandungi panggilan balik bersarang dalam yang sukar untuk dinyahpepijat.

Contoh

Imbas kembali pengambilan kami dari sebelumnya.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('All done'));
Salin selepas log masuk

Menggunakan async/menunggu, kod boleh difaktorkan semula untuk kelihatan seperti ini:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('All done');
  }
}

fetchData();
Salin selepas log masuk

Walaupun mungkin beberapa baris kod lagi, versi ini lebih mudah dibaca kerana ia menyerupai fungsi segerak biasa. Selain itu, jika fungsi di dalam pernyataan .then() adalah lebih kompleks, kebolehbacaan dan kebolehnyahpenyahpepijatan akan menjadi lebih terkesan. Contoh async/menunggu adalah jauh lebih jelas.

Contoh 2: Memesan makanan dari restoran

Struktur async/menunggu

Fungsi async/wait mempunyai dua bahagian penting: async dan await. Kata kunci async ditambahkan sebelum pengisytiharan fungsi dan menunggu digunakan apabila tugas tak segerak bermula.

Mari kita gambarkan ini dengan contoh memesan makanan dari restoran:

// Simulate the order process with async/await
async function foodOrder() {
  console.log("Ordering food...");
  await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds for food to be prepared
  return "Your food is ready!";
}

// Simulate the eating process
function eatFood(order) {
  console.log(order); // This logs "Your food is ready!"
  console.log("Enjoying the meal!");
}

// Simulate continuing the conversation
function continueConversation() {
  console.log("While waiting, you continue chatting with friends...");
}

async function orderFood() {
  console.log("You've arrived at the restaurant.");
  const order = await foodOrder(); // Place the order and wait for it to be ready
  continueConversation(); // Chat while waiting
  eatFood(order); // Eat the food once it arrives
}

orderFood();
Salin selepas log masuk

Outputnya ialah

You've arrived at the restaurant.
Ordering food...
While waiting, you continue chatting with friends...
Your food is ready!
Enjoying the meal!
Salin selepas log masuk

Atas ialah kandungan terperinci async / menunggu. 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