10

What is meant by then(res => res.json()) in the snippet below in react-native fetch?

fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res,
          error: res.error || null,
          loading: false
        });
Bruno Grieder
  • 28,128
  • 8
  • 69
  • 101
Aniket Singh
  • 111
  • 1
  • 1
  • 5
  • How can this be updated ? It doesn't show any effort. OP doesn't even know what `=>` is. This can be simply solved by looking on SO and documentation – Weedoze Oct 05 '17 at 07:06
  • res.json() in react means: when you try fetch data from a server, it will send you a RESPONSE which contains tons of irrelevant information. To target only the BODY part of the response and to convert it from JSON to javascript, you use res.json(). – Abdulhakim Feb 28 '22 at 19:22

3 Answers3

10

That's not really a react question since fetch and then are parts of js itself.

fetch returns an object as Promise that contains various information like headers, HTTP status etc. etc.

You have res.json() and various other possibilities. .json() will just return the body as promise with json content.

For more info: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

You can return the data as following:

  • .arrayBuffer()
  • .blob()
  • .json()
  • .text()
  • .formData()
GottZ
  • 4,824
  • 1
  • 36
  • 46
  • Fine, but what does it mean when there is `=>` sign between `res` and `res.json()` @GottZ – Aniket Singh Oct 05 '17 at 07:01
  • thats called a lambda. thats also part of javascript. go here for more information about it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – GottZ Oct 05 '17 at 07:02
  • @AniketSingh it's basically `.then(function(res){return res.json()})` in short. – GottZ Oct 05 '17 at 07:04
  • but don't hype lambdas now. `this` will be different inside lambdas and will refer to the surrounding scope. – GottZ Oct 05 '17 at 07:04
  • Move over people ;) I think this is the important part: Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object. Why make this so ambiguous? Why not call this method toObject()? – Charles Robertson Dec 15 '21 at 11:00
  • 1
    @CharlesRobertson hey there. javascript objects can also contain recursion, methods, getters and setters, prototypical inheritance and so on. `JSON` on the other hand can only contain data types. `.fromJSON()` would be more precise I guess, thus `.json()` is fine. – GottZ Dec 21 '21 at 11:24
5

Your code part:

res => res.json()

is an ES6 arrow function, which is translated to:

function(res){
    return res.json();
}

And, about the json() function:

The json() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON.

Read more here.

Duc Filan
  • 6,769
  • 3
  • 21
  • 26
3

Javascript fetch function asynchronously pulls a resource from the specified url. Meanwhile fetch returns a Promise. Promise helps with the asynchronous part and runs the function passed into then (res => res.json()) once the resource is loaded with the fetched resource as parameter. The fetched resource can be parsed using json() if it is JSON formatted.

then also returns a Promise making it chainable.

fetch(url) // asynchronously load contents of the url
           // return a Promise that resolves when res is loaded
      .then(res => res.json()) // call this function when res is loaded
      // return a Promise with result of above function
      .then(res => { // call this function when the above chained Promise resolves
        this.setState({
          data: res,
          error: res.error || null,
          loading: false
        });

res => res.json() can also be written as (but not exactly equal)

function(res) { return res.json()}
sabithpocker
  • 15,274
  • 1
  • 42
  • 75