Yield call returns a promise

Question

So I am trying to learn react-redux-saga. I am building a simple application that just grabs user data from an API and displays it. Here is my generator function in my saga:

export function* fetchImage() {
      try {
        const response = yield call(fetch, 'https://randomuser.me/api/');
        console.log("Response 111", response);
        const responseBody = response.json();
        yield put(setImage(response));
      } catch (e) {
        yield put(fetchFailed(e));
      }
      return;

    }

It simply does a yield call to a url and then dispatches an action. However, the response object isn't coming back as JSON, instead it looks like its returning some response object:

I'm not sure what to do with this object. If you hit the URL directly through the browser it returns a JSON object. How do I get it to return JSON?

So my response.json() is returning this object:

Looks like my object that I want is in the [[PromiseValue]] thing. What is that and how do I get to my value?

Answer 1

You can always access the body of the response object after it's resolved:

const response = yield call(fetch, 'https://randomuser.me/api/'); const responseBody = yield response.json(); // HERE is what you want