PricingLoginStart free
Frontend Academy · Pelajaran

async/await dan Pengendalian Error

Tulis fungsi async dengan kata kunci await, bungkus panggilan yang dinantikan dalam blok try/catch, dan fahami bahawa async/await ialah gula sintaksis untuk Promise.

Pelajaran 4 daripada 413 langkah

async/await dan Pengendalian Error ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah async/await?

async/await ialah gula sintaksis bagi Promises. Fungsi async sentiasa mengembalikan Promise. Kata kunci await menghentikan sementara fungsi sehingga Promise yang ditunggu selesai. Kod kelihatan segerak tetapi berjalan secara asinkron.

Fungsi async

Tambahkan kata kunci async sebelum pengisytiharan atau ungkapan fungsi. Fungsi itu kini secara tersirat membungkus nilai pulangannya dalam Promise.

async function fetchUser(id) {
  // implicitly returns a Promise
  return { id, name: 'Alice' };
}

// Equivalent to:
function fetchUser(id) {
  return Promise.resolve({ id, name: 'Alice' });
}

await — Menunggu Promise

await hanya boleh digunakan dalam fungsi async. Ia menghentikan pelaksanaan sementara sehingga Promise selesai dan mengembalikan nilai yang telah diselesaikan. Kod lain dalam gelung peristiwa terus berjalan.

async function loadProfile(id) {
  const user = await fetchUser(id);     // waits for Promise
  const posts = await fetchPosts(user.id); // waits again
  return { user, posts };
}

await Berjujukan berbanding Selari

Menunggu secara berjujukan mudah dibaca tetapi lambat jika tugas-tugas itu tidak saling bergantung. Gunakan Promise.all() untuk menunggu beberapa tugas bebas secara selari.

// Sequential (slow if tasks are independent):
const user = await fetchUser(id);
const settings = await fetchSettings(id); // waits for user unnecessarily

// Parallel (fast):
const [user, settings] = await Promise.all([
  fetchUser(id),
  fetchSettings(id),
]);

try/catch untuk Pengendalian Ralat

Balut panggilan yang ditunggu dalam try/catch untuk mengendalikan penolakan. Blok catch menerima sebab penolakan sebagai objek ralat.

async function saveUser(data) {
  try {
    const response = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    });
    if (!response.ok) throw new Error(`Server error ${response.status}`);
    return await response.json();
  } catch (err) {
    console.error('Save failed:', err.message);
    throw err; // re-throw so caller can handle
  }
}

await Aras Atas

Dalam modul ES (bukan CommonJS), anda boleh menggunakan await pada aras teratas tanpa membungkusnya dalam fungsi async. Hal ini berguna untuk pemulaan modul.

// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;

async/await dengan forEach — Perangkap

Array.forEach() tidak menunggu fungsi panggil balik async. Gunakan for...of untuk lelaran asinkron berjujukan atau Promise.all(arr.map(...)) untuk pelaksanaan selari.

// WRONG — forEach doesn't await:
items.forEach(async (item) => {
  await processItem(item); // runs but forEach doesn't wait
});

// CORRECT — sequential:
for (const item of items) {
  await processItem(item);
}

// CORRECT — parallel:
await Promise.all(items.map(item => processItem(item)));

Objek Ralat dan Ralat Tersuai

Sentiasa lemparkan objek ralat, bukan rentetan, supaya surih tindanan dikekalkan. Cipta kelas ralat tersuai untuk ralat khusus domain yang boleh ditangkap oleh pemanggil mengikut jenis.

class NetworkError extends Error {
  constructor(message, status) {
    super(message);
    this.name = 'NetworkError';
    this.status = status;
  }
}

try {
  const res = await fetch(url);
  if (!res.ok) throw new NetworkError(`Failed`, res.status);
} catch (err) {
  if (err instanceof NetworkError && err.status === 401) {
    redirectToLogin();
  } else {
    throw err;
  }
}

finally dalam async/await

Blok finally dijalankan sama ada try berjaya atau gagal — sama seperti .finally() pada Promise. Gunakannya untuk melepaskan sumber atau menyembunyikan keadaan pemuatan.

async function loadData() {
  setLoading(true);
  try {
    const data = await fetch('/api/data').then(r => r.json());
    setData(data);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false); // always runs
  }
}

IIFE Asinkron untuk Titik Masuk Modul

Balut titik masuk skrip dalam IIFE async apabila anda tidak boleh menggunakan await aras atas.

(async () => {
  const data = await fetchInitialData();
  renderApp(data);
})();

AbortController untuk Pembatalan

Hantar isyarat AbortController kepada fetch untuk membatalkan permintaan yang sedang berjalan. Menangkap AbortError secara berasingan menghalang ralat daripada dipaparkan kepada pengguna.

const controller = new AbortController();

try {
  const data = await fetch(url, { signal: controller.signal }).then(r => r.json());
  setData(data);
} catch (err) {
  if (err.name !== 'AbortError') setError(err.message);
}

// Cancel:
controller.abort();

Semakan Ringkas

Binaan manakah yang mengendalikan ralat daripada Promise yang ditunggu dengan betul?

Jawab dalam pelajaran interaktif

Imbas Kembali: async/await

Fungsi async sentiasa mengembalikan Promises. await menghentikan sementara pelaksanaan sehingga Promise selesai. Gunakan try/catch untuk pengendalian ralat. Untuk operasi selari, gunakan Promise.all(). Elakkan await dalam forEach — gunakan for...of atau Promise.all. AbortController membatalkan permintaan yang sedang berjalan. await aras atas berfungsi dalam modul ES.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
41
Pelajaran
163
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “async/await dan Pengendalian Error” percuma?

Ya — teks penuh “async/await dan Pengendalian Error” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “async/await dan Pengendalian Error”?

Tulis fungsi async dengan kata kunci await, bungkus panggilan yang dinantikan dalam blok try/catch, dan fahami bahawa async/await ialah gula sintaksis untuk Promise. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “async/await dan Pengendalian Error” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Gelung Peristiwa: Call Stack Queue Microtasks
  2. Callback dan Callback Hell
  3. Promise: then catch finally Promise.all
  4. async/await dan Pengendalian Error
← Kembali ke Frontend Academy