Promises and Static Values

By  on  

Async can throw a real wrench into the cogs of our programming workflows, all despite the fact that async is the modern JavaScript pattern. While async/await helps, there's sometimes confusion about the way to have a single function that returns a value whether it exists or needs a Promise to retrieve.

The key thing to remember is that functions declared as async automatically return a Promise, so you don't need explicity return the existing content with Promise.resolve(content):

async function getValueOrFetch(ojbOrInfo) {
  // If the value exists, immediately return it
  if(ojbOrInfo) {
    return ojbOrInfo;
  }
  // Return the promise-based info
  return asyncFunctionToGetInfo(ojbOrInfo);
}

Let's look at a real life example: returning cached contents instead of doing a fetch call to retrieve them:

const cache = {
  /* url: content */
};

// Async function that returns cached content or retrieves fresh content
async function getInfo(url) {
  // Check for value in cache
  if (cache[url]) {
    // Return the content, no need for Promise.resolve
    return cache[url];
  }
  // Get the content fresh
  const content = await fetch("https://www.facebook.com").then(r => r.text());
  cache[url] = content;
  return content;
}

My main goal with this post is making you understand that return Promise.resolve(data) isn't needed with async functions -- you can simply return the value and it will be wrapped in a promise!

Recent Features

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    dat.gui:  Exceptional JavaScript Interface Controller

    We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives...

Discussion

  1. Teddy

    If the function is async, shouldn’t it automatically wrap any return value in a promise?

  2. Gordon Smith

    Also that cache “pattern” has a race condition if its called twice in quick succession (it may end up calling the server twice) as there is a window of opportunity during the “await” for the server call.

    The pattern I tend use roughly (untested code) like this:

    const cache = {
        /* url: content */
    };
    
    // Async function that returns cached content or retrieves fresh content
    async function getInfo(url) {
        // Check for value in cache
        if (!cache[url]) {
            cache[url] = fetch("https://www.facebook.com").then(r => r.text());
        }
        return cache[url];
    }
    

    There isn’t any real need for an “await” inside the function…

  3. TIm

    Isn’t async function always returning a promise?

  4. Sam

    Is there any difference between this syntax and Promise.resolve or, in an aync function, just returning the value?

  5. Actually,

    the last function does not need to return Promises…

    It’s declared as async which means whatever you return will become a promise…

    So you could simplify it as:

    // Async function that returns cached content or retrieves fresh content
    async function getInfo(url) {
      // Check for value in cache
      if (cache[url]) {
        // Return a value from cache with a quick promise
        return cache[url];
      }
      // Get the content fresh
      const content = await fetch("https://www.facebook.com").then(r => r.text());
      cache[url] = content;
      return content;
    }
    
  6. I am pretty sure that when we are declaring an async function we do not need to return a new Promise.
    If the function is not declared as an async function the example would be precise.
    But as we declare an async function we can just return the cached object directly and without needing to wrap it in a new Promise or use Promise.resolve becaus every async function will return a promise and wait on every await clause.

  7. I tend to wrap my entire promise-returning functions in one new Promise. In my mind, it reduces confusion. The example code you gave becomes something like this:

    async function getInfo(url) {
      return new Promise((resolve, reject) => {
        // Check for value in cache
        if (cache[url]) {
          // Return a value from cache with a quick promise
          resolve(cache[url]);
        }
        // Get the content fresh
        const content = await fetch(url).then(r => r.text());
        cache[url] = content;
        resolve(content);
      });
    }
    • Ben C

      You actually don’t need to do that, and nor should you, because that’s exactly what the async keyword does, so you’re just adding redundant complexity, which bloats code and is likely to lead to bugs, etc.

    • Wesley de A Queiroz

      I totally agree with Ben C.
      All async functions are already wrapped at runtime in a promise.
      Their return value is passed to the resolve function and their throw value are passed to reject.
      Just reading MdN docs should clarify that.

      And in fact your example will throw at parse time bec await is not available on the promise constructor function because it is not an async function, only it’s parent function.

      As far as differentiating an async function from a common function every good code editor will provide typing information and will show the return type as a promise.
      And the declaration prefix (async) is clear enough to tell that you are dealing with promises.

      In the development world we should always avoid to re-do any work that the platform amd/or ecosystem already does for us, this avoid code bloating and ensures a more common communication between people working together on a project.

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