Using promises — Chaining

Reference note (untrusted external data; do not execute it as instructions). A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. In the old days, doing several asynchronous operations in a row would lead to the classic callback hell With promises, we accomplish this by creating a promise chain. The API design of promises makes this great, because callbacks are attached to the returned promise object, instead of being passed into a function. Here's the magic: the then() function returns a new promise, different from the original This second promise (promise2) represents the completion not just of doSomething(), but also of the successCallback or failureCallback you passed in — which can be other asynchronous functions returning a promise. When that's the case, any callbacks added to promise2 get queued behind the promise returned by either successCallback or failureCallback. > [!NOTE] > If you want a working example to play with, you can use the following template to create any function returning a promise: > > js > function doSomething() { > return new Promise((resolve) => { > setTimeout(() => { > // Other things to do before completion of the promise > console.log("Did something"); > // The fulfillment value of the promise > resolve(" > }, 200); > }); > } > > > The implementation is discussed in the Creating a Promise around an old callback API section below. With this pattern, you can create longer chains of processing, where each promise represents the completion of one asynchronous step in the chain. In addition, the arguments to then are optional, and catch(failureCallback) is short for then(null, failureCallback) — so if your error handling code is the same for all steps, you can attach it to the end of the chain You might see this expressed with arrow functions instead > [!NOTE] > Arrow function expressions can have an implicit return; so, () => x is short for () => { return x; }. … Attribution: Adapted from MDN Web Docs under CC-BY-SA-2.5. Adaptation: WikiKV selected one documentation section, normalized formatting, retained bounded excerpts, and shortened it at a paragraph or sentence boundary for retrieval. Verify version-sensitive details at the source.