Med then

fetch(url)
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.error(error));

Med async och await

const getUser = async () => {
  try {
    const response = await fetch(url);
    const user = await response.json();
    console.log(user.name);
  } catch (error) {
    console.error(error);
  }
};

async returnerar alltid en promise

const getNumber = async () => 42;

getNumber();  // Promise { 42 }
await getNumber();  // 42

await pausar bara funktionen

const demo = async () => {
  console.log('A');
  await wait(0);
  console.log('B');
};
demo();
console.log('C');
// A, C, B

Koden

const response = await fetch(
  '.../users/999',
);
response.status;  // 404
response.ok;      // false
await response.json();  // {}

Varför?

404 och 500 är svar från servern. Nätverket fungerade, så för fetch gick det bra. fetch kastar bara fel när det inte kommer något svar alls: ingen uppkoppling, fel domän, CORS.

fetchJson

const fetchJson = async (url, options) => {
  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return await response.json();
};

Användningen

try {
  const user = await fetchJson(url);
  show(user);
} catch (error) {
  showError(error.message);
}

Koden

const showUser = async (id) => {
  status.textContent = 'Laddar...';
  button.disabled = true;
  try {
    const user = await fetchJson(urlFor(id));
    status.textContent = user.name;
  } catch (error) {
    status.textContent = 'Kunde inte hämta. Försök igen.';
  } finally {
    button.disabled = false;
  }
};

Laddar, fel, lyckat

try: det som ska hända när allt går bra. catch: ett fel som användaren förstår, inte bara console.log. finally: det som ska hända oavsett, som att sätta på knappen igen.

Ett i taget

const a = await fetchJson(userUrl(1));
const b = await fetchJson(userUrl(2));
const c = await fetchJson(userUrl(3));

Alla samtidigt

const [a, b, c] = await Promise.all([
  fetchJson(userUrl(1)),
  fetchJson(userUrl(2)),
  fetchJson(userUrl(3)),
]);

Promise.all

Ger upp vid första felet. De som lyckades får du aldrig se. Bra när du behöver alla för att kunna visa något.

Promise.allSettled

Väntar på alla och berättar hur det gick för var och en.

const results = await Promise.allSettled([...]);

results.map((r) =>
  r.status === 'fulfilled'
    ? r.value.name
    : r.reason.message,
);

Den första vinner

const timeout = (ms) =>
  wait(ms).then(() => {
    throw new Error('För långsamt');
  });

await Promise.race([
  fetchJson(slowUrl),
  timeout(2000),
]);

Men

race slutar vänta, men anropet fortsätter i bakgrunden. Vill du verkligen avbryta det behövs en AbortController.

Koden

let controller = null;

start.addEventListener('click', async () => {
  controller?.abort();
  controller = new AbortController();
  try {
    await fetch(url, { signal: controller.signal });
  } catch (error) {
    if (error.name === 'AbortError') return;
    showError(error);
  }
});

cancel.addEventListener('click', () => controller?.abort());

När behövs det?

En sökning där användaren skriver vidare: avbryt den förra innan nästa startar, annars kan ett gammalt svar komma sist och skriva över det nya. Ett avbrutet anrop är inget fel. Visa det inte som ett.

AbortSignal.timeout

try {
  await fetch(url, {
    signal: AbortSignal.timeout(5000),
  });
} catch (error) {
  error.name;  // 'TimeoutError'
}

Tre sorters fel

TypeError: inget svar alls, till exempel utan nät. AbortError: någon avbröt. TimeoutError: tiden tog slut. Och ditt eget Error när response.ok är false.

Tid

10 min

Mål

Du kan avbryta ett anrop och skilja ett avbrott från ett fel.

Utan

user.address.city
// TypeError: Cannot read properties
// of undefined (reading 'city')

Med optional chaining

user.address?.city
// undefined

controller?.abort()
// anropas bara om controller finns

|| byter ut allt falsy

'', 0, false, null och undefined.

const orders = 0;
orders || 'okänt';  // 'okänt'

?? byter bara ut null och undefined

Noll beställningar är fortfarande ett svar.

const orders = 0;
orders ?? 'okänt';  // 0