Nested Promises? How to access value in a returned promise?

Question

This code is from a React app. The makeCall function was provided in a Twitch extension example project. I'm using it to call the backend server for my extension.

makeCall(url, method="GET"){
    return new Promise((resolve, reject)=>{
        if(this.isAuthenticated()){
            let headers={
                'Content-Type':'application/json',
                'Authorization': `Bearer ${this.state.token}`
            }

            fetch(url,
                {
                    method,
                    headers,
                })
                .then(response=>resolve(response))
                .catch(e=>reject(e))
        }else{
            reject('Unauthorized')
        }
    })
}

I can access the response, but I'm not certain what's going on with this line of code above: .then(response=>resolve(response)). When I call makeCall it's returning a promise, but the response I'm accessing in the below is showing a Promise inside the response, and I'm not sure how to access the value in there:

this.Authentication.makeCall(bitpostConstants.GET_STATUS_URL)
            .then(response=>{
                if(response.status!=200) {
                    console.log('Error getting status.');
                } else {

                    var responseJson = response.json();
                    console.log('Response', responseJson);

                    // How do I access 'twitterConnected'? This is showing as undefined.
                    console.log('Twitter connected: ' + responseJson.twitterConnected);

Below is the log to the browser dev tools, showing the property (twitterConnected) I'm trying to access, but shows up as undefined if I try to access it above with responseJson.twitterConnected:

  __proto__: Promise
  [[PromiseStatus]]: "resolved"
  [[PromiseValue]]: Object
    twitterConnected: false
    __proto__: Object

  Twitter connected: undefined

Does this answer your question? [Why does .json() return a promise?](https://stackoverflow.com/questions/37555031/why-does-json-return-a-promise) — CertainPerformance, Feb 29 '20 at 22:40
You need to call `.then` on the `.json()` Promise. (Or, *much* better, avoid the explicit Promise construction antipattern entirely) — CertainPerformance, Feb 29 '20 at 22:40
@CertainPerformance yes that mostly sheds some light on it, makes sense thanks! — Nick H, Mar 01 '20 at 00:22

score 0 · Accepted Answer · answered Feb 29 '20 at 22:44

0

this.Authentication.makeCall(bitpostConstants.GET_STATUS_URL)
            .then(response=>{
                if(response.status!=200) {
                    console.log('Error getting status.');
                } else {

                    response.json().then(responseJson => {
                      console.log('Response', responseJson);
                      console.log('Twitter connected: ' + responseJson.twitterConnected);
})

answered Feb 29 '20 at 22:44

Johnny Zabala

2,285
1
12
14

Yup that's it! I actually tried this before posting the question but I must have had a syntax error or something was off because it didn't appear to work. But now that I'm trying it again this does achieve what I'm trying to do. Thanks! – Nick H Mar 01 '20 at 00:22

Nested Promises? How to access value in a returned promise?

1 Answers1