React-native: Possible Unhandled Promise Rejection (id:0)

[albo1337]

Hey Team,

I get this yellow box:

Possible Unhandled Promise Rejection (id: 0):
Already read
TypeError: Already read
    at consumed (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:12146:23)
    at Response.Body.text (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:12237:14)
    at _class._onRegisterPressed$ (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:73490:940)
    at tryCatch (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:10389:30)
    at GeneratorFunctionPrototype.invoke [as _invoke] (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:10665:12)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:10422:13)
    at tryCatch (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:10389:30)
    at invoke (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:10465:12)
    at http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:10473:1
    at tryCallOne (http://10.10.1.227:8081/index.ios.bundle?platform=ios&dev=true:6407:8)

How can I fix this? I'm doing a server request inside a try catch block. Everything is working fine. I'm not getting any errors from my server, only this yellow box appears.

Thank you a lot for this great framework!

albo1337

[jhack32]

Seems like the response was already processed

http://stackoverflow.com/questions/34786358/what-does-this-error-mean-uncaught-typeerror-already-read

[grabbou]

Yep, that error happens when body has been already consumed.

To have a bit of spec-fun:

The json() method, when invoked, must return the result of running consume body with JSON.

and...

Objects implementing the Body mixin also have an associated consume body algorithm, given a type, runs these steps:

1. If this object is disturbed or locked, return a new promise rejected with a TypeError.

Simply said, the following is likely to produce such error:

fetch('http://google.com').then(res => {
  return res.json().then(
     () => res.json() // this will throw
  );
});

[gventuri]

Hi there, I have something similiar happening with my app, and it's pretty strange: infact, if I make a request to a Json file for https://en.wikiquote.org/w/api.php?format=json&action=query&list=search&srsearch=wikipedia&srwhat=text&srprop=timestamp&prop=info, it works great, but if I made the same request for the identical file on my website (http://gabrieleventuri.it/pog/getFlow.json), it doens't work and gives me several errors, as below:

This is my code:

getPostsFromApi() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})

    fetch("http://gabrieleventuri.it/pog/getFlow.json")
     .then((response) => response.json())
     .catch((error) => console.warn("fetch error:", error))
     .then((response) => {
       this.setState({
         pogDataSource: ds.cloneWithRows(response.query.search)}
       )}
     )
  }

  componentDidMount(){
    this.getPostsFromApi()
  }

Can anyone help me? Thank you very much

[jhack32]

@gventuri try debugging by removing the this.setState and do a console.log(response) instead. What does that give you? From the error message, it doesn't look like you're getting the json object back.

[gventuri]

@jhack32 Yes, it is actually undefined, but I don't understand why. Also, it runs the getPostsFromApi() twice, but again, I don't understand why...

[jhack32]

You also need to return response.json()

[gventuri]

Ok, now my getPostsFromApi() looks like this

getPostsFromApi() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})

    fetch("http://gabrieleventuri.it/pog/getFlow.json")
     .then((response) => response.json())
     .catch((error) => console.warn("fetch error:", error))
     .then((response) => {
       console.log(response)
       return response.json()
     }
     )
  }

and this is the console

[jhack32]

getPostsFromApi() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})

    fetch("http://gabrieleventuri.it/pog/getFlow.json")
     .then((response) => { return response.json() } ) 
     .catch((error) => console.warn("fetch error:", error))
     .then((response) => {
       console.log(response)
     })
  }

Maybe I should've been clearer, but I meant to put the return response.json() in the first .then

[gventuri]

[jhack32]

Might be related to this:

https://github.com/facebook/react-native/issues/4415

[gventuri]

@jhack32: Thank you very much! Now it works great!

[leinov]

i'm also have this question

[Eyesonly88]

Note for future readers: this error also happens if you have throw Error(msg) in your code!