5 Awesome JavaScript Promise Tricks

By  on  

The Promise API changed the game in JavaScript. We went from abusing setTimeouts and settling for synchronous operations to doing everything possible to leverage this new async API. Let's check out a handful of awesome Promise API tricks!

Cancel a fetch Request

One problem we instantly complained about with promises was not being able to cancel them. A simple promiseInstance.cancel() would have been excellent but never came. Instead we were given an API that was way more complicated:

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

// Abort request
controller.abort();

The magic here is providing the signal with each fetch request. In the JavaScript world, we inherit difficult APIs and do wonders to abstract them, and thus we'll find a way to better abstract this API.

waitForTime & waitForever

Waiting for a duration is useful in loads of production and testing situations -- it's never ideal but always helpful. I've used two awesome functions to make my life btter:

/* Wait for milliseconds */
function waitForTime(ms) {
  return new Promise(r => setTimeout(r, ms));
}

/* Usage */
await waitForTime(200);

/* Wait Forever */
function waitForever() {
  return new Promise(r => {});
}

// Usage:
await waitForever();

Don't wait for perfect situations, wait for the time you need.

Async Array Functions

Array functions like forEach, map, and other functions are used frequently without the need for them to be synchronous. We don't think about it there's a fair amount of times we can go async with our operations.

const promises = [1, 2, 3].map(async (num) => {
  console.log(num);
});

await promises;

The difference in caring between async and sync is Promise.allSettled. Go async when you can!

then on Objects

Did you know that you can arbitrarily add a then method on objects to have them treated as a Promise?

j = { then: resolve => fetch("/").then(resolve) }

j.then(res => console.log(res));
// Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}

// ... or an await...
const response = await j;
// Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}

Now you know! An excellent trick most don't know about!

Detect an Async Function

Not something you would need to do often but this post is about tricks, right? If you want to detect an asynchronous function, you always can:

async function myFunction() {

}

const isAsync = myFunction.constructor.name === "AsyncFunction";

JavaScript Promises are something we every day but a broader look at them allows us to innovate! Have any Promise tricks of your own? Please share!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

    I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the...

  • By
    MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

Discussion

  1. I love waitForever()! I have coded and used waitForTime for quite some time now (most often with Sindre Sorhus’ delay package on npm) but it never occurred to me to make waitForever!. Definitely useful for testing.

  2. nico

    If you plan to call a function that might be async anyway you could also just test the result for a then method. Because your async function might not be a true modern async function, but maybe just return a promise.

    The waitForTime() is one of my standard async function, but I normally call it sleep(). Another one that helps throttling or waiting for a settled DOM is: await nextFrame(), as in:

    function nextFrame () {
      return new Promise(resolve => requestAnimationFrame(r));
    }
    
  3. I’m either confused about the “Async Array Functions” section, or maybe there is an error?

    const promises = [1, 2, 3].map(async (num) => {/* ... */});
    // promises is an Array
    await promises; // does not await the promises *inside the array
    
    • Yes, I’m under the same impression.

      await [promiseA, promiseB]

      is not the same as

      await Promise.all([promiseA, promiseB])

      — or is it?

  4. Macfly

    Hello David, like answer above : await is only valid **in** async fonction. Why do u use it outside, is there a trick here ?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!