What sets returning a promise from async or a regular function apart?

Question

What sets returning a promise from async or a regular function apart?

I have been pondering whether the async keyword is redundant when simply returning a promise for some time now.

Let's take a look at this example:

async function thePromise() {
    const v = await Inner();
    return v+1;
}

async function wrapper() {
    return thePromise();
}

I am questioning if, for the wrapper function, since it does not wait inside the promise for resolution, the async keyword is unnecessary. Shouldn't we just use:

function wrapper() {
    return thePromise();
}

The main downside to this approach is that it hides the fact that we are using promises, but other than that: is there any real distinction between returning a promise from an asynchronous function or a regular function?

javascript asynchronous async-await

Answer 1

Answer №1

Take a look at this straightforward example: -

let person = {
    name: 'Jessica'
}
// Creating a promise
let myPromise = new Promise((resolve, reject) => {
    if (person) {
        resolve(person.name==='Jessica')
    }
    else {
        reject(new Error("Oops!"))
    }
}
)

function handlePromise(){
    return myPromise;
}
// Using the promise
handlePromise().then(res => {
    if (res) {
        console.log("Promise fulfilled")
        console.log(person)
    }
    else {
        console.log("Promise rejected")
    }
})

Answer 2

Take a look at this straightforward example: -

let person = {
    name: 'Jessica'
}
// Creating a promise
let myPromise = new Promise((resolve, reject) => {
    if (person) {
        resolve(person.name==='Jessica')
    }
    else {
        reject(new Error("Oops!"))
    }
}
)

function handlePromise(){
    return myPromise;
}
// Using the promise
handlePromise().then(res => {
    if (res) {
        console.log("Promise fulfilled")
        console.log(person)
    }
    else {
        console.log("Promise rejected")
    }
})

Answer 3

Answer №2

In the realm of JavaScript, there is no concept of a Promise within a Promise; they are essentially the same.

// code snippet 1
promise1.then(() => {
  //...
  return promise2;
}).then(f);

// This is equivalent to code snippet 2

promise1.then(() => {
  //...
  return promise2.then(f);
});

A similar principle applies to async functions. When a promise is returned from an async function, it is akin to returning the awaited expression.

// code snippet 3
async () => {
  // ...
  return p;
}

// This is equivalent to code snippet 4
async () => {
  // ...
  return await p;
}

It's important to mention that this equivalence does not extend to arrays of promises and similar scenarios. In such cases, you can utilize Promise.all to transform the array of promises into a single promise or create custom solutions for other data structures.

Answer 4

In the realm of JavaScript, there is no concept of a Promise within a Promise; they are essentially the same.

// code snippet 1
promise1.then(() => {
  //...
  return promise2;
}).then(f);

// This is equivalent to code snippet 2

promise1.then(() => {
  //...
  return promise2.then(f);
});

A similar principle applies to async functions. When a promise is returned from an async function, it is akin to returning the awaited expression.

// code snippet 3
async () => {
  // ...
  return p;
}

// This is equivalent to code snippet 4
async () => {
  // ...
  return await p;
}

It's important to mention that this equivalence does not extend to arrays of promises and similar scenarios. In such cases, you can utilize Promise.all to transform the array of promises into a single promise or create custom solutions for other data structures.

What sets returning a promise from async or a regular function apart?

Answer №1

Answer №2

Similar questions

Evaluation of Library (VueJS) - Displaying various components in an individual test case

Tips on showcasing a JSON object containing two arrays in HTML using a pair of for loops

Challenges arise when using Bootstrap 4 for country selection

Activate the button with a tap of the space bar on a webpage

How can we utilize CSS floats to achieve maximum widths?

Creating a drop-down menu within an HTML table along with a D3 bar chart

Display a Bootstrap input button group addon, where the first button has rounded corners only after the second button has been hidden

Sustain unbroken websocket connection with Discord using Node.js

Transform the hue of symbols within D3-legend

Can someone explain the process of adding a JavaScript state variable from one React component so that it can be utilized in other components?

What is the best way to activate an @keyframe animation based on the scrolling action?

What is the best way to retrieve and display the heading of the current section that is being viewed using Bootstrap Vue's ScrollSpy feature?

Angular2 Dropdown not updating with values from API

Utilizing JSON data to create dynamic HTML content for Isotope.js filtering

Confidential data in Module Design

Complete and automatically submit a form in a view using AngularJS

Tips for utilizing formidable with NextJS 13 API for image uploading and resolving request errors

The results of the jQuery selector appear differently in the browser console compared to PhantomJS

The attempt to install "expo-cli" with the command "npm install -g expo-cli" was unsuccessful

Guide to sending and receiving JSON data using XAMPP PHP