Async on Commentary of Takao

Patterns to Avoid with JavaScript Async/Await

Sat, 15 Feb 2025 00:00:00 +0900

Introduction

Since the introduction of async/await in ES2017, writing asynchronous JavaScript has become far more intuitive. It allows developers to express asynchronous logic in a synchronous-looking structure, drastically improving codebase readability compared to nested Promise chains (.then().catch()).

However, this clean synchronous-like syntax can hide performance pitfalls and error-handling bugs. In this article, we’ll dive into common async/await antipatterns and learn how to refactor them into high-performance, resilient code.

Antipattern 1: Unnecessary Serialization (Sequential Awaiting)

The most common mistake is executing independent asynchronous tasks sequentially, missing opportunities for parallel execution.

JavaScript Event Loop Deep Dive: Microtasks, Macrotasks, and Beyond

Mon, 19 Feb 2024 00:00:00 +0900

The JavaScript event loop is one of the most important yet misunderstood concepts in the language. Despite JavaScript being single-threaded, its event loop enables non-blocking concurrency through a sophisticated queue system. This article builds a complete mental model of how JavaScript handles asynchronous execution, from the call stack to the microtask queue and everything in between.

The Call Stack and Execution Model

JavaScript uses a call stack with a LIFO (Last In, First Out) structure. When a function is called, a new stack frame is pushed onto the stack. When the function returns, the frame is popped off. The key principle is run-to-completion: each function runs to completion before any other code can interrupt it.

Advanced JavaScript Promise Patterns: Async Control Flow Mastery

Tue, 05 Dec 2023 00:00:00 +0900

Promises are fundamental to modern JavaScript, but mastering asynchronous control flow requires going beyond basic .then() chains. This article explores advanced Promise patterns that intermediate to senior developers need for production applications, from concurrency control to error handling and cancellation.

The Promise Landscape Beyond Basics

JavaScript provides four static methods on Promise for composing async operations, each suited to different scenarios:

Method	Resolves When	Rejects When	Use Case
`Promise.all`	All promises resolve	Any promise rejects	Parallel API calls, all required
`Promise.allSettled`	All promises settle	Never	Mixed results, log all outcomes
`Promise.race`	First promise settles	First promise rejects	Timeout race conditions
`Promise.any`	First promise resolves	All promises reject	First-successful-response pattern

const results = await Promise.allSettled([
 fetch("/api/users").then(r => r.json()),
 fetch("/api/posts").then(r => r.json()),
 fetch("/api/comments").then(r => r.json()),
]);
const successful = results.filter(r => r.status === "fulfilled").map(r => r.value);

Promise.allSettled is particularly useful when you need to process partial results even if some operations fail, such as batch data synchronization where individual record failures should not abort the entire batch.