A small confusion about the Fetch API

Question

I am new to asynchronous JavaScript and I have been learning how to fetch data from 3rd party APIs. While on it, I came across a small issue:

const users = fetch('https://jsonplaceholder.typicode.com/users')
  .then((res) => { // <--- with curly braces
      res.json()
  })
  .then((data) => {
    console.log(data)
  })

const users = fetch('https://jsonplaceholder.typicode.com/users')
  .then((res) => res.json()) // <--- without curly braces
  .then((data) => {
    console.log(data)
  })

With the curly braces, I got the result as undefined.

Whereas without the curly braces, I get the entire data.

How and why is this possible? Has anybody come across this situation before?

The issue has nothing to do with `fetch()`. With `{ }` you need an explicit `return`; without `{ }` you don't. — Pointy, Aug 03 '19 at 13:39
I feel dumb. I totally forgot about the ES6 syntax. Thank you @Pointy — Abishek H, Aug 03 '19 at 13:41

score 2 · Accepted Answer · answered Aug 03 '19 at 13:43

Hay Abishek;

These are two different notations for arrow functions:

An arrow function with expression body, in which case that expression implicitly / automatically is the returned value

(a, b) => expression

An arrow function with a block statement as body. This is similar to "normal" function expressions and declarations, the curly braces denote the block. You have to explicitly return a value.

(a, b) => {
  statement;
  statement;
  return expression;
}

Thank you, Kelley. I realized this just now. – Abishek H Aug 03 '19 at 13:46 — Abishek H, Aug 03 '19 at 13:46

A small confusion about the Fetch API

1 Answers1