React-boilerplate: I cant access response json data from error

Created on 21 Apr 2017  路  3Comments  路  Source: react-boilerplate/react-boilerplate

in sagas.js

/**
 * Github repos request/response handler
 */
export function* getRepos() {
  // Select username from store
  const username = yield select(makeSelectUsername());
  const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;

  try {
    // Call our request helper (see 'utils/request')
    const repos = yield call(request, requestURL);
    yield put(reposLoaded(repos, username));
  } catch (err) {
    yield put(repoLoadingError(err)); // <--- this
  }
}

I try

err.response.json().then((response) => {
  yield put(repoLoadingError(err));
})

This code didn't work, because it's inside generator function.

How i can get response data in saga?

Most helpful comment

I don't know if this can help and if it is the best way, but I changed utils/request to:

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  // parse response
  return response.json().then((json) => {
    return {
      json,
      throwError: true,
    };
  });
}

// this checks if response had an error and in this case it throws it
function checkException(response) {
  if (response.throwError === true) {
    const error = new Error(response.errmsg);
    error.error = response.json;
    throw error;
  }

  return response;
}

export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(checkException)   // <-- check if exception was raised and throws it with the parse response
    .then(parseJSON);
}

All 3 comments

I don't know if this can help and if it is the best way, but I changed utils/request to:

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  // parse response
  return response.json().then((json) => {
    return {
      json,
      throwError: true,
    };
  });
}

// this checks if response had an error and in this case it throws it
function checkException(response) {
  if (response.throwError === true) {
    const error = new Error(response.errmsg);
    error.error = response.json;
    throw error;
  }

  return response;
}

export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(checkException)   // <-- check if exception was raised and throws it with the parse response
    .then(parseJSON);
}

I solved the problem this way.
But it's very inconvenient to test.

export function* loginUser(action) {
  try {
    const response = yield call(EmployeeTokens.create, { body: action.payload });
    yield put(loginUserSuccess(response));
  } catch (err) {
    let error;
    try {
      error = yield err.response.json();
    } catch (e) {
      error = { errors: [{ detail: `${err.name}: ${err.message}` }] };
    }

    yield put(loginUserFailure(error));
  }
}

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hieubq90 picture hieubq90  路  3Comments

williamgranli picture williamgranli  路  3Comments

chaintng picture chaintng  路  4Comments

kunal-mandalia picture kunal-mandalia  路  4Comments

bsr203 picture bsr203  路  4Comments