6

https://codesandbox.io/s/asyncawait-axios-practice-c060n

This is a link to a sandbox I have with simple code. Why does it keep returning a promise and not waiting until the it is finished resolving as I put await before the axios call?

It's as if it's just returning the promis and it's done. If I do a console.log inside the function local scope it will return a promise object and if I return the result and do a console.log in global scope, it will return what I'm looking for. The thing is, I thought I didn't have to do it that way and wait for the promise to resolve. I get that asyn returns a promise and axios does too... so what am I missing when dealing with promises resolving promises? 

import axios from "axios";

async function GetPosts() {
  const result = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const data = await result.data;
  return data;
}

const response = GetPosts();
console.log(response);

I just want to make sure my fundamental understanding of what's going on is correct.

  • I'm importing axios
  • I'm declaring an function called GetPosts() that has await before the axios call. (I'm assuming it will pause until it is finished)
  • I'm awaiting for the results data

I receive a promise instead of the intended json. Why?

Improve this question
4
  • an async function always returns a Promise; that's pretty much the point. From a non-async context, you can write GetPosts().then(response => console.log(response)) Commented Aug 8, 2019 at 15:30
  • As the answer notes, you can also call the function with await from inside another async function. Commented Aug 8, 2019 at 15:31
  • you don’t need await result.data;, using await on the previous line, when declaring result, ‘pauses’ program execution until axios.get() returns a promise, which means the value will subsequently be available to assign to a variable or return. this is a good article on axios.get() and also shows example with try/catch block, as suggested in Dominic’s answer: flaviocopes.com/axios/#get-requests Commented Aug 8, 2019 at 15:54
  • 1
    also relevant: ”Async functions always return a promise, whether you use await or not. That promise resolves with whatever the async function returns, or rejects with whatever the async function throws”, see developers.google article Commented Aug 8, 2019 at 16:16

1 Answer 1

Reset to default
4

Because you are calling the function but not waiting on the results.

(async () => {
  const response = await GetPosts();
  console.log(response);
})();

Without waiting all you are receiving back is a Promise.

It's worth noting that you should always expect the worst and handle request errors either in GetPosts or outside it with a catch.

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

1 Comment

Thank you! So it was just a fundamental misunderstanding on my part. It's literally just how promises work.I appreciate the help!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.