Rumah  >  Artikel  >  hujung hadapan web  >  async / menunggu

async / menunggu

Barbara Streisand
Barbara Streisandasal
2024-10-10 06:24:30811semak imbas

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'));

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();

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();

Outputnya ialah

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

Atas ialah kandungan terperinci async / menunggu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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