How to get the JSON from promise

Question

Code:

fetch(`https://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=++++++++++&tags=obama&format=json&extras=url_m&nojsoncallback=true`, {
    method: "GET",
    headers : { 
      'Content-Type': 'application/json',
      'Accept': 'application/json'
     }
  }).then(response => {
    console.log(response.json())
  })

Output:

Promise {_40: 0, _65: 0, _55: null, _72: null}

Add another then: `fetch(...).then(resp => resp.json()).then(data => ...)` — Jared Smith, Aug 13 '18 at 15:24
Why are you sending a `Content-type` header in a `GET` request? You don't send any content with `GET`. — Barmar, Aug 13 '18 at 15:28

Jared Smith · Answer 1 · 2018-08-13T15:28:30.357

4

Add another then:

fetch(...).then(resp => resp.json()).then(data => ...)

Note that fetch will only error on a network errors, if you want it to reject the Promise on e.g. a 500 response you'll have to check the status code and throw:

fetch(url)
  .then(resp => {
     // you'll need to supply the function that checks the status here
     if (http_response_ok(resp.status)) {
       return resp.json();
     } else {
       throw new Error(`Got back ${resp.status}`);
     }
  }).then(data => {
     // happy path
  }).catch(err => {
     // sad path
  });

edited Aug 13 '18 at 15:28

answered Aug 13 '18 at 15:25

Jared Smith

19,721
5
45
83

Got from: Possible Unhandled Promise Rejection (id: 0): – Salman Ghumsani Aug 13 '18 at 15:26
@SalmanGhumsani add a catch handler, see my updated answer. – Jared Smith Aug 13 '18 at 15:28
Got: console.log("sad path") – Salman Ghumsani Aug 13 '18 at 15:30
1

See https://stackoverflow.com/questions/38842499/react-native-possible-unhandled-promise-rejection for information about that react-native warning – Barmar Aug 13 '18 at 15:30
@SalmanGhumsani do `console.log(err);` you should see the actual error. – Jared Smith Aug 13 '18 at 15:30
I got from err: ReferenceError: http_response_ok is not defined – Salman Ghumsani Aug 13 '18 at 15:32
@SalmanGhumsani as I said in the comment in the code, you'll have to define it. An easy one would be something like `const http_response_ok = code => (code < 400) && (code >= 200);` but you can be as fine-grained as you want. – Jared Smith Aug 13 '18 at 15:34

BigPun86 · Accepted Answer · 2018-08-13T15:33:04.640

2

You could await the response:

fetch(url, options).then(async (response) => {
  const data = await response.json();
  console.log(data)
})

edited Aug 13 '18 at 15:33

answered Aug 13 '18 at 15:31

BigPun86

2,480
2
25
49

1

Yeah cool That's work simply I am looking the same thank you :) – Salman Ghumsani Aug 13 '18 at 15:38

How to get the JSON from promise

2 Answers2