Using async-await not returning the values

Question

I use the following code which works! I was able to fetch the data in the spread (then) , http200

Promise.all([
    axios({
      method: 'post',
      url: 'https://oauth2.-arch.mand.com/oauth2/token',
      data: qs.stringify({
        'grant_type': 'client_credentials'
      }, {
        'scope': 'run:crud'
      }),
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic NTgwNjgtMDhhZTczOGNl',
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }),
    axios({
      method: 'post',
      url: 'https://oauth2.-arch.mand.com/oauth2/token',
      data: qs.stringify({
        'grant_type': 'client_credentials'
      }, {
        'scope': 'exe:crud'
      }),
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic NTgwNjgtMDhhZTczOGNl',
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    })
  ]).then(axios.spread((...responses: AxiosResponse[]) => {
      const aToken = responses[0];
      const bToken = responses[1];
    }).catch(function(error: any) {
      console.log("Error: " + error);
    });

Now I want to wrap it with async function which return two response (responses[0], responses[1] )

I’ve created this function

const FetchData = async (): Promise<{ run: string; app: string }> => {

let aToken:string;
let bToken:string;
Promise.all([
    axios({
      method: 'post',
      url: 'https://oauth2.-arch.mand.com/oauth2/token',
      data: qs.stringify({
        'grant_type': 'client_credentials'
      }, {
        'scope': 'run:crud'
      }),
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic NTgwNjgtMDhhZTczOGNl',
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }),
    axios({
      method: 'post',
      url: 'https://oauth2.-arch.mand.com/oauth2/token',
      data: qs.stringify({
        'grant_type': 'client_credentials'
      }, {
        'scope': 'exe:crud'
      }),
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic NTgwNjgtMDhhZTczOGNl',
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    })
  ]).then(axios.spread((...responses: AxiosResponse[]) => {
      aToken = responses[0];
      bToken = responses[1];
    }).catch(function(error: any) {
      console.log("Error: " + error);
    });

// add this return 
return {
    run: aToken ,
    app: bToken
};

)}

Now I’ve created function to call it and get the tokens

async function main() {

    let val = await FetchData();
    console.log(val)


}

The problem is that I got empty value in the val property, while put a breakpoint inside main function I see that I got into the console, before I actually get the values from the ).then(axios.spread(( , Any idea how to adopt the code to return the value from the spread operator and then call to the console?

Does this answer your question? How do I return the response from an asynchronous call? — palaѕн
– palaѕн, Commented Jun 3, 2020 at 6:21

Yousaf · Accepted Answer · 2020-06-03 07:23:35Z

1

You are not using async-await correctly. You need to await Promise.all. Once both promises are resolved, response data will be in a property named data inside each response object that you get from axios. If you need whole response object then you can destructure it

Here's an example

const FetchData = async (): Promise<{ run: string; app: string }> => {
    try {
        const [response1, response2] = await Promise.all([
            axios({
               ...
            }),
            axios({
               ...
            })
        ]);

        return {
          run: response1,
          app: response2
        };

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

Here's a demo that fetches data from 2 endpoints of jsonplaceholder api

edited Jun 3, 2020 at 7:23

answered Jun 3, 2020 at 6:51

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NSS Over a year ago

Thanks, i will try it now. what regard the then , I dont see it ?

NSS Over a year ago

inside the the then Im getting the data, could you add it to the example ?

Yousaf Over a year ago

you don't need then block when using async-await. see the demo of jsonplaceholder api that i included in my answer. It fetches data from 2 endpoints

gengsong · Accepted Answer · 2020-06-03 06:22:23Z

1

const res = await Promist.all([...])
return { run: res[0], app: res[1] }

answered Jun 3, 2020 at 6:22

gengsong

363 bronze badges

Comments

Piyush · Accepted Answer · 2020-06-03 07:04:29Z

You need to change the position of your return statement:

Updated code with changes:

const FetchData = (): Promise<{ run: string; app: string }> => {

let aToken:string;
let bToken:string;
// Return the promise here

return Promise.all([
    axios({
      method: 'post',
      url: 'https://oauth2.-arch.mand.com/oauth2/token',
      data: qs.stringify({
        'grant_type': 'client_credentials'
      }, {
        'scope': 'run:crud'
      }),
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic NTgwNjgtMDhhZTczOGNl',
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }),
    axios({
      method: 'post',
      url: 'https://oauth2.-arch.mand.com/oauth2/token',
      data: qs.stringify({
        'grant_type': 'client_credentials'
      }, {
        'scope': 'exe:crud'
      }),
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic NTgwNjgtMDhhZTczOGNl',
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    })
  ]).then(axios.spread((...responses: AxiosResponse[]) => {
      aToken = responses[0];
      bToken = responses[1];

      // This return is for getting the data once the promise is resolved either with then or await
      return {
         run: aToken ,
         app: bToken
      };
    }).catch(function(error: any) {
       console.log("Error: " + error);
       return error;
    });

)}

As you are returning the value before the promise is resolved so you are not getting any data. You need to return promise and inside then you need to return the required data, to get once the promise is resolved in invoking function.

Collectives™ on Stack Overflow

Using async-await not returning the values

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related