How to get the return value of a async function that returns a promise

Question

So I have a code like this

  const getAllProduct = async () => {
    let allProduct = "";

    let config = {
      method: "get",
      url: db_base_url + "/products/",
      headers: {
        Authorization: "Bearer " + token.access.token,
        "Content-Type": "application/json",
      },
    };

    try {
      let response = await axios(config);
      allProduct = response.data.results;
    } catch (error) {
      console.log(error);
    }
    console.log(allProduct);
    return allProduct;
  };

The console.log(allProduct) do prints an array.

The function will be called on the render method of react by

return (<div> {getAllProduct()} </div>)

I've tried to do

return (<div> {console.log(getAllProduct())} </div>

But the console.log on rendering returns to be Promise Object instead of the results array.

How can I go around this?

You can't get around this - but you shouldn't need to. It returns a promise since you don't know when your function will complete as it occurs asynchronously, once in "asynchronous mode" you can't get your value back to "synchronous mode". You'll need to await the returned Promise or use .then() on it. — Nick Parsons
– Nick Parsons, Commented Feb 21, 2021 at 10:30
You'll need to await it, and/or set the value globally. Define a variable above somewhere and set it on the return but this is async, await it. :) — BGPHiJACK
– BGPHiJACK, Commented Feb 21, 2021 at 10:31

Yousaf · Accepted Answer · 2023-06-18 19:38:29Z

async functions return a Promise which means their result is not immediately available.

What you need to do is either await the result of calling getAllProduct() function or chain a then() method call.

Looking at your code, I assume that you want to call getAllProduct() function after your component is rendered. If that's the case, useEffect() hook is where you should call your function.

You could define and call your function inside the useEffect() hook and once the data is available, save that in the local state of your component.

First define the local state of the component

const [products, setProducts] = useState([]);

Define and call the getAllProduct() function inside the useEffect() hook.

useEffect(() => {
  const getAllProduct = async () => {
    ...

    try {
      let response = await axios(config);
      allProduct = response.data.results;
       
      // save the data in the state
      setProducts(allProduct);

    } catch (error) {
      console.log(error);
    }
  };

  // call your async function
  getAllProduct();
}, []);

Finally, inside the JSX, map() over the products array and render the products in whatever way you want to render in the DOM.

return (
  <div>
    { products.map(prod => {
       // return some JSX with the appropriate data
    }) }
  </div>
);

Md.Usman Ansari · Accepted Answer · 2021-02-21 10:30:41Z

0

async function always return a promise you use await before call it getAllProduct()

const  res = await getAllProduct();
console.log(res)

answered Feb 21, 2021 at 10:30

Md.Usman Ansari

1496 bronze badges

1 Comment

gene b. Oct 31 at 19:33

What does this do? We want to return a custom result. res is not a custom result.

Anil_M · Accepted Answer · 2022-01-20 07:36:37Z

In my case daisy chaining .then didn't work. Possibly due to fact that I had a helper JS file that held all DB related functions and their data was utilized across various React components.

What did work was daisy chaining await within an async. I modified code where it works for same Component (like in your case). But we can take same logic , put async function in different JS file and use its response in some other component.

Disclaimer : I haven't tested below code as my case was different.

useEffect( () => {
    var handleError = function (err) {
        console.warn(err);
        return new Response(JSON.stringify({
            code: 400,
            message: 'Error in axios query execution'
        }));
      };
    
      const getAllProduct = async () => {
        let allProduct = "";
        ...
    
        const response = await ( axios(config).catch(handleError));
        allProduct = await response;
        return allProduct;
      }
},[]);     

// Then inside JSX return

    getAllProduct().then( data => { 
        // Make use of data 
    });

Minh Viet · Accepted Answer · 2021-02-21 10:30:17Z

-1

use

getAllProduct().then(res => console.log(res))

answered Feb 21, 2021 at 10:30

Minh Viet

441 silver badge5 bronze badges

3 Comments

Jan Over a year ago

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Minh Viet Over a year ago

I understand. I will try harder to give an explanation

gene b. Oct 31 at 19:32

What does this even do? res is not the custom result that we want to return from our function!

Collectives™ on Stack Overflow

How to get the return value of a async function that returns a promise

4 Answers 4

Comments

1 Comment

Disclaimer : I haven't tested below code as my case was different.

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Disclaimer : I haven't tested below code as my case was different.

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related