Common Errors

Not invoking the function expression

When async is defined as a function expression, you have to invoke the function and store it as an instantiated variable

let paramFromExternalScope = "Something";

const createUser = async () => await someAsyncFunction(paramFromExternalScope);

// must be invoked to obtain the value from Promise
const createdUser = createUser();

Not returning in .then chain

This function won't do anything after execution because there is no return statement inside the callback function.

// no result returned
return await fetch("url")
  .then(res => res.text())
  .then(
    result => {
      JSON.parse(result)
    }
    // missing return
  );

Return value is a Promise object unresolved

Without converting the Promise object to a value, you won't be able to access the content of the Promise call result.

There are two ways to convert a Promise object to a value.

  1. use .then() to access the value
fetch().then(value => console.log(value));
  1. use await inside async function, then assign the return to a variable
const value = await fetch();

Not formatting the response correctly

fetch("url")
  .then((response) => {
    // missing .json()
    // returns unparsed Promise
    // .json() is async method
    return response
  })

Variable Scope Issue

Incorrectly scoped:

fetch("url")
  .then((response) => {
    // let is scope-limited
    let result;

    result = response; 
  })

Correctly scoped:

let result; 

fetch("url")
  .then((response) => {
    result = response;
  })