惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

H
Help Net Security
T
ThreatConnect
SecWiki News
SecWiki News
F
Future of Privacy Forum
AWS News Blog
AWS News Blog
C
Cisco Blogs
A
Arctic Wolf
Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
Scott Helme
Scott Helme
V
V2EX
博客园 - 叶小钗
阮一峰的网络日志
阮一峰的网络日志
K
Kaspersky official blog
G
Google Developers Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
P
Privacy International News Feed
C
Cyber Attacks, Cyber Crime and Cyber Security
N
News | PayPal Newsroom
Schneier on Security
Schneier on Security
NISL@THU
NISL@THU
Microsoft Azure Blog
Microsoft Azure Blog
量子位
The Hacker News
The Hacker News
Stack Overflow Blog
Stack Overflow Blog
Security Latest
Security Latest
M
Microsoft Research Blog - Microsoft Research
Google Online Security Blog
Google Online Security Blog
博客园_首页
C
CXSECURITY Database RSS Feed - CXSecurity.com
I
InfoQ
Google DeepMind News
Google DeepMind News
Y
Y Combinator Blog
The Cloudflare Blog
Microsoft Security Blog
Microsoft Security Blog
Martin Fowler
Martin Fowler
Cisco Talos Blog
Cisco Talos Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Troy Hunt's Blog
F
Fox-IT International blog
S
Security @ Cisco Blogs
博客园 - 司徒正美
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
C
Comments on: Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
L
LINUX DO - 最新话题
GbyAI
GbyAI
Project Zero
Project Zero
腾讯CDC
T
Tailwind CSS Blog

DEV Community

Deep Dive: React Server Components in TanStack Start Migrating off Google Analytics: Umami vs Plausible vs Fathom Building a Portfolio That Actually Demonstrates Software Engineering Benchmarking LLM Structured Outputs ShareBox v5 — GPU transcoding, Netflix-style grid, and why I don't need Plex anymore TOML Schema is live Handling Duplicate Shopify Webhook Events (And Why You Must) Original Kubernetes Dashboard — retired upstream, upgraded to Angular 21. لماذا أسست ترينافو للتجار العرب الذين تتجاهلهم المنصات الغربية Construyendo un recomendador de películas en Python: de los datos al modelo When APIs Lie: A Lesson in Defensive Debugging Pope Leo XIV's AI Encyclical: What Builders Must Know (2026) Donna v0.3.0 HTB — MonitorsFour | Writeup The Free Tool You Trust Is the One You Should Fear the Most HTB — MonitorsFour | Writeup Fr 97. Embeddings and Vector Search: Semantic Search That Works Deep Dive: Building "Gravity Paint" - A Tactile Physics Instrument with React, Matter.js, and p5.js ABAP Unit Testing with Test Doubles and Mocking Frameworks: A Senior Architects Guide to Isolating Dependencies in SAP S/4HANA LeetCode Solution: 5. Longest Palindromic Substring kovax-react 0.8: Tailwind v4 preset, FormField adapters, ColorModeScript, and Storybook I built an AI résumé tool that refuses to lie about your experience The hat Azure Entra ID User & Role Management — Step-by-Step Practical Guide With A Simple Excercise The AI-Native Company: How a Single Founder Can Build Global Organizations Powered by AWS and an Ecosystem of Artificial Intelligences Building a Lightweight Remote MCP Knowledge Base on Cloudflare Workers Why I built Trinavo for the MENA merchants Western platforms ignore The N+1 Query That Killed Our Database, And How I Fixed It Docstrings vs Markdown Docs: What Should Developers Actually Write? Training Data Provenance: The Manifest Diff That Explains the Hash Add SVGIcons MCP to Claude Code and Find SVG Icons from Your Terminal 3 CLI Tools You Can Buy with Crypto — No KYC, No Subscriptions COSS Weekly: OpenClaw competitor NanoClaw Raises $12M, Dust Raises $40M, Sonar Acquires Gitar, and more How to know if you actually need mobile proxies (without buying any) Building Cursor for Community: A Buildathon Built on Time Pressure How we built a PII masking layer for LLM APIs — local detection, reversible tokens, one line to integrate Why MLFQ Was Way Ahead of Its Time Add Runtime Limits to Claude Agent Workflows I Built a Prompt Injection Detector with 98% Recall on Unseen Attacks. Here's Why Data Beat Architecture. 8 Vite Config Options Every Developer Should Know (Vite 8) Feature Flags That Forgot to Leave Why Trust Infrastructure Is Becoming the Hidden Layer of Donation Platforms XyPriss: Rethinking Core Performance and Zero-Trust Architecture in Modern Backends Designing Configuration for Scalable Treasure Hunts SSH Login Delays: The 10-Second Wait That Drives Us Crazy Building Production Multi-Agent Workflows in n8n: What 50 Deployments Taught Us A 3-layer memory system that gives Claude Code persistent context across sessions. Trishul SNMP Suite 2.0.1: Better MIBs, Traps, and SNMP Labs How I built a production AI SaaS as a solo developer Auto-labelling 1.2M robotics frames with VLMs: a failover story India’s Laws Were Not Built for AI — And Courts Are Filling the Gap skill-insp: A Skill That Scores Other Skills Clprolf Minimalist Messaging in the Age of AI What's actually in a good .cursorrules file? I built 10 of them — here's what I learned Building Strong Python Basics – Loops, Functions and Logic How to Choose the Right Tech Stack for Your Project I built a free multi-tab JSON editor — here's what I learned HTTP Headers Every Developer Should Know (2026) Building Cross-Platform Digital Products: Challenges and Best Practices Data Privacy in the Age of AI: How Product Teams Can Build Trust with Users What Would WordPress Look Like If It Were Designed Today? Why Backup Success Does Not Mean Database Recoverability Local AI Office Assistant That Never Sends Your Documents to the Cloud Building TaskForge: Translating Enterprise Chaos into an Open-Source Scheduler Tesla P40 in a Homelab: 24GB of Inference on a Budget Llama 4: Meta's Latest — Scout, Maverick, and the MoE Revolution George Hotz called AI code 'slop.' He's half right. Como Construir um Fluxo de Trabalho Baseado em Engenharia de Prompt e Automação We Audited Our Agent Tool-Call Traces. Half Our Eval Data Was Garbage. The Hidden Cost of Downtime: How SRE Error Budgets Protect National Economic Infrastructure Getting started with openHUMANS can be an exciting venture for developers looking to create innovative applications in the realm of human-ce Stack Overflow: A Powerful Community for Developers and Learners From Language Models to Humanoid Minds ✨ Road to Senior #2: How Computers Think in Numbers Why LLM debugging fails on fragmented repository context How to Deploy a LangGraph Agent on AWS Bedrock AgentCore An outreach kit for solo founders whose drafts can't hallucinate Open Satchel is live Amy Kwalwasser and the Growing Importance of Quantum Risk Modeling I Built ShellReq - A Native API Client for VS Code & Terminal If Microsoft and Uber can't afford AI coding, what chance do the rest of us have? MADCAP: Building a Multi-Agent Debate CLI That Argues With Itself So You Don't Have To Why most AI fails at IDOR (and how AMAS fixes it with causal reasoning) How to Audit a Laravel Codebase You've Inherited LangGraph 워크플로우 템플릿 (v34) BugBench: a developer origin story and practical guide for VS Code / Kiro users A solution to messy token systems for Next.js A NestJS reference app that proves the nest-native stack under realistic backend pressure Observability for AI Systems: Monitoring Drift, Hallucinations, and Reliability in Production I Thought “Data Analyst” Was the Whole Game… Then I Entered the Data Avengers Office 👀 Create and configure network security groups How to analyze the cost of Kafka? How I Shipped 2,500+ Commits With AI Agents Using a 12-Phase Workflow [Boost] We built MDCMS, a Markdown-first CMS for teams using AI agents Zero Heap Allocations at 1.18 GB/s: Deep Dive into ForgeZero 4.0.x The Minimum Viable Test Suite for Working with Agents Why Perplexity Started Citing My Blog: 5 Changes That Actually Worked Sync Supabase via OAuth: No Connection String Needed
Async/Await in JavaScript: From Callbacks to Clean Code (2026)
Alex Chen · 2026-05-26 · via DEV Community

Alex Chen

Async/Await in JavaScript: From Callbacks to Clean Code (2026)

Async JavaScript has come a long way. Here's the complete picture — from callbacks to async/await and everything in between.

The Evolution

// ERA 1: Callbacks (2010-ish) — The "Callback Hell"
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      getFinalData(c, function(finalData) {
        console.log(finalData);
      });
    });
  });
});
// → Pyramid of doom → Hard to read → Error handling is a nightmare

// ERA 2: Promises (2015) — Chainable, but still verbose
getData()
  .then(a => getMoreData(a))
  .then(b => getEvenMoreData(b))
  .then(c => getFinalData(c))
  .then(finalData => console.log(finalData))
  .catch(err => console.error(err));
// → Better! Linear flow. But still lots of .then() chains.

// ERA 3: Async/Await (2017+) — Looks like synchronous code!
async function processData() {
  const a = await getData();
  const b = await getMoreData(a);
  const c = await getEvenMoreData(b);
  const finalData = await getFinalData(c);
  console.log(finalData); // So clean!
}
// → Read top to bottom. Error handling with try/catch. Winner.

Enter fullscreen mode Exit fullscreen mode

Promises Deep Dive (You Need This Foundation)

Creating Promises

// Basic promise constructor
function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) resolve(xhr.response);
      else reject(new Error(`HTTP ${xhr.status}`));
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send();
  });
}

// Most APIs already return promises:
fetch(url).then(res => res.json());
fs.promises.readFile(path, 'utf8');

Enter fullscreen mode Exit fullscreen mode

Promise Methods You Should Know

// Promise.all — Run in parallel, wait for ALL
const [users, posts, comments] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// ALL must succeed. One fails = all fail.

// Promise.allSettled — Run all, get results regardless of success/failure
const results = await Promise.allSettled([
  fetch('/api/users'),
  fetch('/api/posts'), // Maybe this one fails
  fetch('/api/comments'),
]);
results.forEach(r => {
  if (r.status === 'fulfilled') console.log(r.value);
  else console.error('Failed:', r.reason);
});

// Promise.race — First to finish wins (success or failure)
const result = await Promise.race([
  fetch('/api/fast-server'),
  fetchWithTimeout('/api/slow-server', 3000), // Custom timeout wrapper
]);

// Promise.any — First SUCCESSFUL result wins (ignores failures until all fail)
const data = await Promise.any([
  fetchFromPrimary(url),
  fetchFromBackup(url),
  fetchFromCache(url), // At least one needs to succeed
});

// Common pattern: Timeout wrapper
function withTimeout(promise, ms) {
  return Promise.race([
    promise,
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Timeout')), ms)
    ),
  ]);
}

await withTimeout(fetch('/api/heavy'), 5000); // Throws after 5s

Enter fullscreen mode Exit fullscreen mode

Async/Await Complete Guide

Syntax Basics

// async ALWAYS returns a Promise
async function hello() {
  return 'Hello!'; // Implicitly wrapped in Promise.resolve()
}
hello().then(console.log); // "Hello!"

// await pauses execution INSIDE async functions
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`); // Pauses here
  const user = await response.json();                  // Then resumes
  return user;
}

// Can use in arrow functions too
const getUser = async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
};

Enter fullscreen mode Exit fullscreen mode

Parallel vs Sequential (Performance!)

// ❌ SLOW: Sequential awaits (each waits for previous)
async function getAllDataSlow() {
  const users = await fetch('/api/users');     // Wait 100ms
  const posts = await fetch('/api/posts');     // Wait another 150ms
  const comments = await fetch('/api/comments');// Wait another 80ms
  // Total: ~330ms
}

// ✅ FAST: Independent calls run in parallel
async function getAllDataFast() {
  const [usersRes, postsRes, commentsRes] = await Promise.all([
    fetch('/api/users'),     // All start simultaneously
    fetch('/api/posts'),
    fetch('/api/comments'),
  ]);                        // Total: ~150ms (slowest one)

  const [users, posts, comments] = await Promise.all([
    usersRes.json(),
    postsRes.json(),
    commentsRes.json(),
  ]);

  return { users, posts, comments };
}

Enter fullscreen mode Exit fullscreen mode

Error Handling

// Method 1: try/catch (most common)
async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (err) {
    console.error(`Failed to fetch ${url}:`, err.message);
    return null; // Or rethrow, or return fallback value
  }
}

// Method 2: Higher-order error handler
function withErrorHandler(fn) {
  return (...args) => fn(...args).catch(err => {
    console.error(`[Error in ${fn.name}]:`, err);
    return null; // Prevent unhandled rejection
  });
}

const safeGetUser = withErrorHandler(getUser);

// Method 3: Go pattern (explicit error handling)
async function loadData() {
  let [err, data] = await to(promiseHere());
  if (err) { /* handle */ }
  // use data
}

// Helper for Go-style error handling
function to(promise) {
  return promise.then(data => [null, data], err => [err, null]);
}

Enter fullscreen mode Exit fullscreen mode

Looping with Async/Await

// ❌ WRONG: forEach ignores async/await
urls.forEach(async url => {
  const data = await fetch(url); // Fires but doesn't await!
}); // Moves on immediately, doesn't wait for fetches

// ✅ for...of loop (sequential, each awaits)
for (const url of urls) {
  const data = await fetch(url); // Waits for each one
  process(data);
}

// ✅ for...of + Promise.all inside (parallel batches)
const batchSize = 5;
for (let i = 0; i < urls.length; i += batchSize) {
  const batch = urls.slice(i, i + batchSize);
  const results = await Promise.all(batch.map(url => fetch(url)));
  processBatch(results);
}

// ✅ map + Promise.all (fully parallel)
const results = await Promise.all(urls.map(async url => {
  const res = await fetch(url);
  return res.json();
}));

Enter fullscreen mode Exit fullscreen mode

Async Iterators & Generators

// Generator that yields items asynchronously
async function* paginate(endpoint, pageSize = 50) {
  let page = 1;
  while (true) {
    const response = await fetch(`${endpoint}?page=${page}&size=${pageSize}`);
    const data = await response.json();

    if (data.items.length === 0) break; // No more pages

    yield* data.items; // Yield each item
    page++;
  }
}

// Usage: consume with for-await-of
for await (const item of paginate('/api/users')) {
  console.log(item.name);
  // Processes one at a time, memory-efficient for huge datasets
}

// Or collect into array
const allUsers = [];
for await (const user of paginate('/api/users')) {
  allUsers.push(user);
}

Enter fullscreen mode Exit fullscreen mode

Real-World Patterns

Retry Logic

async function retry(fn, options = {}) {
  const {
    maxAttempts = 3,
    delayMs = 1000,
    backoff = 2,           // Exponential backoff multiplier
    shouldRetry = (e) => true, // Conditionally retry based on error
  } = options;

  let lastError;

  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (err) {
      lastError = err;

      if (attempt === maxAttempts || !shouldRetry(err)) {
        throw err; // Final attempt or non-retryable error
      }

      const waitTime = delayMs * Math.pow(backoff, attempt - 1);
      console.warn(`Attempt ${attempt}/${maxAttempts} failed. Retrying in ${waitTime}ms...`);
      await sleep(waitTime);
    }
  }
}

function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }

// Usage
const data = await retry(() => fetch('https://flaky-api.com/data').then(r => r.json()), {
  maxAttempts: 5,
  delayMs: 1000,
  shouldRetry: (err) => err.message.includes('529') || err.message.includes('timeout'),
});

Enter fullscreen mode Exit fullscreen mode

Request Caching / Deduplication

class RequestCache {
  #cache = new Map();

  async get(key, fetcher, ttlMs = 60_000) {
    const cached = this.#cache.get(key);

    if (cached && Date.now() - cached.timestamp < ttlMs) {
      return cached.data; // Cache hit!
    }

    // In-flight deduplication: if request is already running, reuse it
    if (cached?.inflight) {
      return cached.inflight; // Return same promise
    }

    const inflight = fetcher().then(data => {
      this.#cache.set(key, { data, timestamp: Date.now() });
      return data;
    }).finally(() => {
      // Clear inflight flag when done
      const entry = this.#cache.get(key);
      if (entry?.inflight === inflight) entry.inflight = null;
    });

    this.#cache.set(key, { inflight, timestamp: Date.now() });
    return inflight;
  }

  clear(key) { this.#cache.delete(key); }
  clearAll() { this.#cache.clear(); }
}

const apiCache = new RequestCache();

// Multiple components calling same endpoint simultaneously
// → Only ONE actual HTTP request, others share the promise
const user1 = await apiCache.get('user:123', () => fetchUser(123));
const user2 = await apiCache.get('user:123', () => fetchUser(123)); // Cached!

Enter fullscreen mode Exit fullscreen mode

Race Conditions & Mutex

// Problem: Double-click triggers two writes
async function updateProfile(data) {
  await db.update(user.id, data); // Click once → OK
  // Click twice → Two updates, potential conflict!
}

// Solution: Mutex (mutual exclusion)
class Mutex {
  #locked = false;
  #queue = [];

  async acquire() {
    while (this.#locked) {
      await new Promise(resolve => this.#queue.push(resolve));
    }
    this.#locked = true;
  }

  release() {
    this.#locked = false;
    if (this.#queue.length > 0) {
      this.#queue.shift()(); // Wake up next waiter
    }
  }
}

const profileMutex = new Mutex();

async function updateProfileSafe(data) {
  await profileMutex.acquire();
  try {
    await db.update(user.id, data);
  } finally {
    profileMutex.release();
  }
}
// Now rapid clicks queue up instead of racing.

Enter fullscreen mode Exit fullscreen mode

Top Mistakes to Avoid

// ❌ Forgetting await in loops
async function processItems(items) {
  items.forEach(async item => {
    await process(item); // ❌ forEach doesn't await!
  }); // Returns immediately, doesn't wait
}

// ✅ Use for...of
for (const item of items) {
  await process(item); // ✅ Each one completes before next
}

// ❌ Unhandled promise rejection
async function risky() {
  throw new Error('Oops');
}
risky(); // No .catch(), no await → UnhandledRejection!

// ✅ Always handle or delegate
risky().catch(err => console.error(err)); // Handled
// OR ensure caller awaits it

// ❌ Using await inside non-async callback
['a', 'b', 'c'].forEach(item => {
  await process(item); // SyntaxError! Not in async function
});

// ✅ Wrap in async IIFE or use for...of
for (const item of ['a', 'b', 'c']) {
  await process(item); // Works fine
}

// ❌ Mixing callbacks and promises incorrectly
fs.readFile(file, (err, data) => {
  const result = await parse(data); // SyntaxError! Not async
});

// ✅ Use fs.promises (Promise-based API)
const data = await fs.promises.readFile(file, 'utf8');
const result = await parse(data);

// ❌ Blocking event loop with CPU-heavy work
async function heavyComputation(data) {
  return processHugeArray(data); // Blocks entire Node.js process!
}

// ✅ Offload to worker thread or yield periodically
async function heavyComputationNonBlocking(data) {
  const chunkSize = 10000;
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    processChunk(chunk);
    await new Promise(r => setTimeout(r, 0)); // Yield to event loop
  }
}

Enter fullscreen mode Exit fullscreen mode

Quick Reference

Pattern Code
Create Promise new Promise((resolve, reject) => {...})
Wait for all await Promise.all([p1, p2])
All settled await Promise.allSettled([p1, p2])
First to finish await Promise.race([p1, p2])
First success await Promise.any([p1, p2])
Sequential loop for (const x of xs) { await f(x); }
Parallel loop await Promise.all(xs.map(x => f(x)))
Error handling try { ... } catch (e) { ... }
Timeout Promise.race([fetch(), timeout(ms)])
Retry Loop with exponential backoff
Async generator async function* gen() { yield await ... }
Consume generator for await (const x of gen()) { ... }

What's your favorite async pattern? Still using Promises or fully team async/await?

Follow @armorbreak for more practical JS guides.