Why use Async/Await in Fetch calls

Question

I have a basic question on the need/purpose of using async await in front of backend calls?

useEffect(() => {
  headerFooter(props.match.params.token)
    .then(res => {
      setData(res)
      setHeaderFooter(res.header, res.footer)
      return grabUserInventory(res.user_id)
        .then(data => {
          setInventory(data)
          setRenderedData(data)
          setProgress(false)
          return getAllOrgs()
            .then(data => {
              var outputData = data.map(Object.values);
              setOrgs(outputData)
            })
        })
    });
});

If my code works completely fine like this (which it does) then why do I see people writing async and await for all of their fetch calls? What does this accomplish? When should I do this?

As you realize, they both create the same result. The use of Async/Await makes code easier to read and understand. That's it. For some people the use of Async/Await makes things more confusing. This may help: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await — Randy Casburn, Nov 04 '20 at 17:14
Your code when converted to `async-await` syntax will look like [this](https://pastebin.com/EXQQe6MA). They achieve the same result but as you can see in the link, `async-await` can make code more readable as compared to promise-chaining. — Yousaf, Nov 04 '20 at 17:18
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Emile Bergeron, Nov 04 '20 at 18:53

score 0 · Answer 1 · answered Nov 04 '20 at 17:32

Fetch returns a promise. And a promise is an object that resolves asynchronously. Therefore, you either have to use then as then keyword 'waits' for the promise to resolves and then executes the piece of code. That's why your code works.

I believe you can achieve the same removing the then keyword and expliciting saying to await the code to resolve.

I'm no expert, but there's a good answer in this post I recommend reading Promises vs Async/Await in React`

score 0 · Answer 2 · answered Nov 04 '20 at 17:43

Asynchronous JavaScript is useful to know, as the MDN Documentation points out...

...many Web API features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it...

(Source: MDN Web Docs: Introducing asynchronous JavaScript

This is why it is asynchronous: Your JavaScript loads first, then your JavaScript calls another file (or resource) that requires some network resources and time to get. So, when do you want to your JavaScript code to execute when the file comes back? You can have the code within a .then() block, or use await to have it be the next line of code.

So, for instance, you can use .then(arg=>{somefunction()};), as you are doing right now, or you can do await asynchronousFunction(); somefunction();. If you were to do asynchronousFunction(); somefunction(); without await, then the results from asynchronousFunction() would likely not be available for somefunction(); to use.

Why use Async/Await in Fetch calls

2 Answers2