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?](https://stackoverflow.com/q/14220321) — palaѕн, Jun 03 '20 at 06:21

score 1 · Answer 1 · answered Jun 03 '20 at 06:22

1

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

answered Jun 03 '20 at 06:22

gengsong

36
3

Yousaf · Accepted Answer · 2020-06-03T07:23:35.860

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 03 '20 at 07:23

answered Jun 03 '20 at 06:51

Yousaf

27,861
6
44
69

Thanks, i will try it now. what regard the `then` , I dont see it ? – NSS Jun 03 '20 at 07:13
inside the the `then` Im getting the data, could you add it to the example ? – NSS Jun 03 '20 at 07:14
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 – Yousaf Jun 03 '20 at 07:22

score 1 · Answer 3 · answered Jun 03 '20 at 07:04

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.

Using async-await not returning the values

3 Answers3