5 úžasných triků s příslibem JavaScriptu

Promise API změnilo hru v JavaScriptu. Přešli jsme ze zneužití setTimeout s a spokojit se se synchronními operacemi a udělat vše pro to, aby bylo možné využít toto nové asynchronní API. Pojďme se podívat na několik úžasných triků Promise API!

Zrušit požadavek na načtení

Jeden problém, na který jsme si se sliby okamžitě stěžovali, byla nemožnost je zrušit. Jednoduchý promiseInstance.cancel() bylo by to skvělé, ale nikdy nepřišlo. Místo toho jsme dostali API, které bylo mnohem složitější:

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

// Abort request
controller.abort();

Kouzlo zde spočívá v poskytnutí signal s každým fetch žádost. Ve světě JavaScriptu dědíme obtížná API a děláme zázraky, abychom je abstrahovali, a tak najdeme způsob, jak toto API lépe abstrahovat.

waitForTime &waitForever

Čekání po určitou dobu je užitečné v mnoha produkčních a testovacích situacích – nikdy to není ideální, ale vždy užitečné. Použil jsem dvě úžasné funkce, abych zlepšil svůj život:

/* Wait for milliseconds */
function waitForTime(ms) {
  return new Promise(r => setTimeout(r, ms));
}

/* Usage */
await waitForTime(200);

/* Wait Forever */
function waitForever() {
  return new Promise(r => {});
}

// Usage:
await waitForever();

Nečekejte na dokonalé situace, počkejte na čas, který potřebujete.

Asynchronní funkce pole

Funkce pole jako forEach , map , a další funkce se používají často, aniž by bylo nutné, aby byly synchronní. Nepřemýšlíme o tom, že je dost časů, kdy můžeme být asynchronní s našimi operacemi.

const promises = [1, 2, 3].map(async (num) => {
  console.log(num);
});

await promises;

Rozdíl v péči mezi asynchronní a synchronizovanou je Promise.allSettled . Až budete moci, přejděte do asynchronního režimu!

pak na Objekty

Věděli jste, že můžete libovolně přidat then metodu na objektech, aby s nimi bylo zacházeno jako se slibem?

j = { then: resolve => fetch("/").then(resolve) }

j.then(res => console.log(res));
// Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}

// ... or an await...
const response = await j;
// Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}

Teď víš! Vynikající trik, o kterém většina neví!

Detekce asynchronní funkce

Není to něco, co byste museli dělat často, ale tento příspěvek je o tricích, že? Pokud chcete detekovat asynchronní funkci, vždy můžete:

async function myFunction() {

}

const isAsync = myFunction.constructor.name === "AsyncFunction";

JavaScript Sliby jsou něco, co děláme každý den, ale širší pohled na ně nám umožňuje inovovat! Máte nějaké vlastní triky na slib? Prosím sdílejte!