Writing High-Quality Maintainable Code: Asynchronous Optimization

Introduction

In modern frontend development, asynchronous operations such as API requests and timers are increasingly frequent, making it essential to understand common async scenarios and optimization techniques to avoid issues like rendering glitches and duplicate loads.

Types of Asynchronous Implementations

JavaScript provides several ways to handle async behavior:

Callback

Callbacks are the earliest method, passing a function to be invoked after the host function completes. Examples include setTimeout and the second argument of React's setState.

setTimeout(() => { this.doSomething(); }, 200);
this.setState({ count: res.count }, () => { this.doSomething(); });

Promise

Promises enable chaining and error handling with resolve, reject, and catch, improving over callbacks.

let promise = new Promise((resolve, reject) => { reject("Sorry, not my type"); });
promise.then(data => { console.log('first success' + data); return 'first success' + data; }, error => { console.log(error); })
  .then(data2 => { console.log('second success' + data2); }, error2 => { console.log(error2); })
  .catch(e => { console.log('caught error' + e); });

async/await

async/await is syntactic sugar over promises, allowing sequential code that looks synchronous.

async function asyncDemoFn() {
  const data1 = await getData1();
  const data2 = await getData2(data1);
  const data3 = await getData3(data2);
  console.log(data3);
}
await asyncDemoFn();

Generator

Generators act as state machines, yielding control and resuming later, useful for orchestrating async steps.

function* foo() {
  for (let i = 1; i <= 3; i++) {
    let x = yield `wait a moment, i = ${i}`;
    console.log(x);
  }
}
// usage example omitted for brevity

Comparison

Chronological order: callback → Promise → generator → async/await

async/await is the ultimate form of async handling.

Each method improves readability and control over the previous one.

Async Scenarios in Business

Callback Hell

Nested callbacks lead to hard‑to‑read code; async/await can flatten the structure.

async function asyncDemoFn2() {
  const res1 = await getData1();
  const res2 = await getData2(res1);
  const res3 = await getData3(res2);
  console.log(res3);
}
await asyncDemoFn2();

Async Loops

Various patterns for handling multiple async calls:

Parallel Execution

Promise.all([getData1(), getData2(), getData3()]).then(res => console.log('res:', res));

Sequential Execution

Using async/await with for, while, reduce, or recursion.

// for loop example
const sources = [getData1, getData2, getData3];
async function promiseQueue() {
  console.log('start');
  for (let fn of sources) {
    await fn();
  }
  console.log('done');
}
promiseQueue();

Conclusion

The article covered common async usage patterns and simple examples, noting that many more complex scenarios exist.

References

JS Async Programming Six Solutions, Async/Await vs Promise, Four Methods of JavaScript Async Programming.