javascript
const p = Promise.resolve({ ok: true });JavaScript Async and Promises Cheat Sheet
Promises, async/await, fetch, timers, generators, async iterables, and event loop patterns.
Export
Copy the compact sheet, download it, or print it.
Download
`D` dense toggle · `C` copy all
Promises
Create, chain, settle, and compose promises.
javascript
const p = Promise.reject(new Error("Boom"));javascript
fetchData()
.then((data) => transform(data))
.catch((err) => console.error(err))
.finally(() => console.log("done"));javascript
const [user, posts] = await Promise.all([getUser(), getPosts()]);javascript
const results = await Promise.allSettled(tasks);javascript
const winner = await Promise.race([fast(), slow()]);javascript
const firstSuccess = await Promise.any(providers);Async / Await
Write linear async flows and handle async errors.
javascript
async function loadUser(id) {
const res = await fetch(`/api/users/${id}`);
return res.json();
}javascript
try {
const data = await loadUser(1);
console.log(data);
} catch (err) {
console.error(err);
}javascript
for (const url of urls) {
const res = await fetch(url);
console.log(await res.text());
}javascript
const html = await Promise.all(urls.map(async (url) => {
const res = await fetch(url);
return res.text();
}));javascript
await (async () => {
const config = await loadConfig();
console.log(config);
})();Fetch API
HTTP requests, JSON handling, abort signals, timeouts, and retries.
javascript
const res = await fetch("/api/items");
const data = await res.json();javascript
const res = await fetch("/api/items", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});javascript
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
}javascript
await fetch(url, {
headers: { Authorization: `Bearer ${token}` },
});javascript
const controller = new AbortController();
setTimeout(() => controller.abort(), 3000);
await fetch(url, { signal: controller.signal });javascript
await Promise.race([
fetch(url),
new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), 3000)),
]);javascript
const form = new FormData();
form.append("file", file);
await fetch("/upload", { method: "POST", body: form });javascript
async function withRetry(fn, retries = 3) {
let lastError;
for (let i = 0; i < retries; i++) {
try { return await fn(); } catch (err) { lastError = err; }
}
throw lastError;
}Timers and Event Loop
setTimeout, setInterval, microtasks, debouncing, and throttling.
javascript
const timeoutId = setTimeout(() => {
console.log("Later");
}, 1000);javascript
clearTimeout(timeoutId);javascript
const intervalId = setInterval(tick, 1000);javascript
clearInterval(intervalId);javascript
queueMicrotask(() => {
console.log("Runs before next macrotask");
});javascript
function debounce(fn, wait = 250) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), wait);
};
}javascript
function throttle(fn, wait = 250) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= wait) {
last = now;
fn(...args);
}
};
}Iterables, Generators, and Async Iteration
Custom iterables, generators, and for-await-of loops.
javascript
function* ids() {
yield 1;
yield 2;
yield 3;
}javascript
const gen = ids();
gen.next(); // { value: 1, done: false }javascript
function* combined() {
yield* [1, 2];
yield* [3, 4];
}javascript
const range = {
from: 1,
to: 3,
*[Symbol.iterator]() {
for (let i = this.from; i <= this.to; i++) yield i;
},
};javascript
async function* pages() {
let page = 1;
while (page <= 3) {
yield await fetch(`/api/page/${page++}`).then((r) => r.json());
}
}javascript
for await (const page of pages()) {
console.log(page);
}More in JavaScript
JavaScript Regex, JSON, and Date Cheat Sheet
Regular expressions, JSON parsing and serialization, dates, Intl formatting, math, and crypto helpers.
JavaScript Node.js Cheat Sheet
Node.js filesystem, HTTP, process, streams, events, child processes, and worker threads.
JavaScript DOM and Browser API Cheat Sheet
DOM selection, manipulation, browser events, storage, URL APIs, clipboard, observers, and forms.
JavaScript Arrays and Objects Cheat Sheet
Comprehensive array, object, collection, and string manipulation patterns in JavaScript.
JavaScript Cheat Sheet
Core JavaScript syntax, functions, classes, modules, and everyday language patterns.
Recommended next
TypeScript Utility Types and Recipes
TYPESCRIPT
Built-in utility types and practical application patterns.
TypeScript tsconfig and Tooling
TYPESCRIPT
tsconfig.json patterns, diagnostics, and project references.
TypeScript Classes and Modules
TYPESCRIPT
Classes, access modifiers, inheritance, modules, and validation boundaries.
TypeScript Functions and Narrowing
TYPESCRIPT
Function typing, overloads, control-flow narrowing, and async typing.
TypeScript Types and Generics
TYPESCRIPT
Advanced type operators, mapped types, conditional types, and utility types.
TypeScript Cheat Sheet
TYPESCRIPT
Core TypeScript syntax, typing patterns, and compiler commands.