Die Event Loop und Promises: asynchrones JavaScript vorhersagen

Zum Aufwärmen: einfacher synchroner Code, noch nichts Asynchrones. Was gibt dieser Code aus?

function a() {
  console.log('a start');
  b();
  console.log('a end');
}
function b() {
  console.log('b');
}
a();

Sagen Sie es vorher, bevor Sie weiterlesen. Was gibt dieser Code der Reihe nach aus?

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

Bringen Sie die Zeilen, die dieses Programm ausgibt, in die Reihenfolge, in der sie erscheinen.

async function run() {
  console.log('run: start');
  await null;
  console.log('run: after await');
}

setTimeout(() => console.log('timeout'), 0);
run();
queueMicrotask(() => console.log('microtask'));
console.log('script end');

Fehlersuche. Dies ist ein CommonJS-Skript, ausgeführt mit Node.js. Warum wird „caught:“ nie ausgegeben, und warum beendet sich der Prozess nach „done“ mit „Error: boom“? (Die Antworten bleiben englisch, weil der Test sie mit einer Aussage im Programm abgleicht.)

async function load() {
  throw new Error('boom');
}

try {
  load();
} catch (err) {
  console.log('caught:', err.message);
}
console.log('done');

Ihre Seite zeigt den Namen eines Benutzers und seine Beiträge. Ist die Beitrags-API ausgefallen, wollen Sie trotzdem den Namen. Ergänzen Sie die Promise-Methode, sodass „ok: Ada“ und dann „failed: posts API down“ ausgegeben wird.

// ES module, so top-level await is allowed
const fetchUser = () => Promise.resolve('Ada');
const fetchPosts = () => Promise.reject(new Error('posts API down'));

const results = await Promise.____([fetchUser(), fetchPosts()]);
for (const r of results) {
  if (r.status === 'fulfilled') console.log('ok:', r.value);
  else console.log('failed:', r.reason.message);
}

Knobelaufgabe. load() packt den Aufruf in try/catch und gibt bei einem Fehler einen Ersatzwert zurück. Was gibt dieser Code aus?

async function getData() {
  throw new Error('offline');
}

async function load() {
  try {
    return getData();
  } catch (err) {
    return 'fallback';
  }
}

load().then(
  (value) => console.log('value:', value),
  (err) => console.log('error:', err.message)
);

Kleine Aufgabe. Schreiben Sie loadDashboard() in Node.js. Das Benutzerprofil ist erforderlich: Schlägt es fehl, werfen Sie einen Fehler mit einer klaren Meldung. Drei Widgets (news, weather, stocks) sind optional: Zeigen Sie die, die gelingen, und protokollieren Sie die, die fehlschlagen. Alles soll gleichzeitig starten, nicht nacheinander. Täuschen Sie das Netzwerk mit einer Hilfsfunktion delay(ms, value, fail) auf Basis von setTimeout vor, lassen Sie ein Widget fehlschlagen und führen Sie es aus.