Lompati ke konten utama
Modul 7 · Pelajaran 4 dari 428/32 dalam kursus~12 min
Pelajaran modul (4/4)

Kesalahan dalam kode asinkron

Operasi asinkron gagal secara berbeda dari operasi sinkron: kesalahan tidak segera terjadi, itu tiba "nanti", ketika Janji memasuki status ditolak. Mari kita lihat dua alat utama.

try/catch dengan await

Saat Anda meletakkan await sebelum Janji yang gagal, kesalahannya ditampilkan kembali sebagai pengecualian normal: Anda menangkapnya dengan try/catch.

JS
async function safeRead() {
  try {
    const r = await fetch('/api/cose');
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return await r.json();
  } catch (err) {
    console.error('network error:', err.message);
    return null;
  }
}

Ini adalah pola yang paling mudah dibaca: Anda menulis "jalan bahagia" secara linier, dan menangani semuanya dalam satu blok.

.catch dengan Janji

Dalam gaya dirantai:

JS
fetch('/api/cose')
  .then((r) => r.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

.catch menangkap kesalahan apa pun yang terjadi di sepanjang rantai sebelumnya.

Promise.all gagal pada penolakan pertama

JS
const ps = [Promise.resolve(1), Promise.reject(new Error('no')), Promise.resolve(3)];
try {
  const r = await Promise.all(ps);
} catch (err) {
  console.log(err.message); // 'no'
}

Janji lainnya tetap berjalan di latar belakang, tetapi Promise.all "menyelesaikan" kesalahan pertama. Jika ingin hasil semuanya (termasuk kegagalan), gunakan Promise.allSettled:

JS
const outcomes = await Promise.allSettled(ps);
// [{ status: 'fulfilled', value: 1 },
//  { status: 'rejected', reason: Error('no') },
//  { status: 'fulfilled', value: 3 }]

Cobalah

Latihan#js.m7.l4.e1
Upaya: 0Memuat…

Definisikan `readOrFallback(p, fallback)` async: coba tunggu Promise p; jika ditolak, kembalikan fallback.

Memuat editor…
Tunjukkan petunjuk

coba { kembali menunggu p; } catch { kembalikan cadangan; }

Solusi tersedia setelah 3 upaya

Tinjau latihan

Latihan#js.m7.l4.e2
Upaya: 0Memuat…

Definisikan async `allOrNothing(promises)`: gunakan Promise.all. Jika setidaknya satu gagal, kembalikan array kosong []. Jika tidak, kembalikan nilainya.

Memuat editor…
Tunjukkan petunjuk

coba { kembali menunggu Promise.all(promises); } menangkap { kembali []; }

Solusi tersedia setelah 3 upaya