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
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

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!