web-dev-qa-db-ja.com

Redux-Sagaでfetch（）応答のエラーを処理する方法は？

Redux-sagaを使用して、サーバーからのUnauthorizedエラーを処理しようとしました。これは私の物語です：

function* logIn(action) {
  try {
    const user = yield call(Api.logIn, action);
    yield put({type: types.LOG_IN_SUCCEEDED, user});
  } catch (error) {
    yield put({type: types.LOG_IN_FAILED, error});
  }
}

私はこのようなデータを取得します：

fetchUser(action) {
  const {username, password} = action.user;
  const body = {username, password};
  return fetch(LOGIN_URL, {
    method,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body)
  })
    .then(res => {
      res.json().then(json => {
        if (res.status >= 200 && res.status < 300) {
          return json
        } else {
          throw res
        }
      })
    })
    .catch(error => {throw error});
}

とにかく結果は{type: 'LOG_IN_SUCCEEDED', user: undefined}予想されるとき{type: 'LOG_IN_FAILED', error: 'Unauthorized'}。私の間違いはどこですか？ Redux-Sagaを使用してエラーを正しく処理する方法

javascriptreduxfetchredux-saga
20
rel1x

thenメソッドとサガでerrorとfetchUserを処理しないでください。あなたはすでにあなたのサガにtry/catchingしているので、あなたはそこでそれを扱うことができます。

例

佐賀

function* logIn(action) {
  try {
    const response = yield call(Api.logIn, action);

    if (response.status >= 200 && response.status < 300) {
      const user = yield response.json();

      yield put({ type: types.LOG_IN_SUCCEEDED, user });
    } else {
      throw response;
    }
  } catch (error) {
    yield put({ type: types.LOG_IN_FAILED, error });
  }
}

Fetch

fetchUser(action) {
  const { username, password } = action.user;
  const body = { username, password };

  return fetch(LOGIN_URL, {
    method,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body)
  })
}

サイドノートとして：fetchのAPIは、リクエストを行うとthen- able応答を返すため、少し厄介です。多くのライブラリがあります。個人的には、デフォルトでjsonを返すaxiosを好みます。

21
Mario Tacke

応答ステータスを検証するifステートメントが必要な場合if(res.status >= 200 && res.status < 300) {は、resが定義されている最初のプロミス内にある必要があり、現在はres.json()の解決済みプロミス内にあります。

.then(res => {
   if (res.status >= 200 && res.status < 300) {
      res.json().then(json => {
         return json
    }
  })
})
2
StackOverMySoul

1つのサガで複数のAPI呼び出しを行う必要がある場合、より良いアプローチはフェッチ段階でエラーをスローすることです。

[〜＃〜] fetch [〜＃〜]

export const getCounterTypes = (user) => {
  const url = API_URL + `api/v4/counters/counter_types`;

  const headers = {
    'Authorization': user.token_type + ' ' + user.access_token,
    'Accept': 'application/json'
  };
  const request = {
      method: 'GET',
      headers: headers
  };
  return fetch(url, request)
  .then(response => {
    return new Promise((resolve, reject) => {
      if (response.status === 401) {
        let err = new Error("Unauthorized");
        reject(err);
      }
      if (response.status === 500) {
        let err = new Error("Critical");
        reject(err);
      }
      if ((response.status >= 200 && response.status < 300) || response.status === 400) {
        response.json().then(json => {
          console.log(json);
          resolve(json);
        });
      }
    });
  });
}

[〜＃〜] saga [〜＃〜]

export function* getMainScreenInfoSaga() {
  try {
    const user = yield select(getUser);
    const userInfo = yield select(getUserInfo);
    if (userInfo) {
      yield put({ type: types.NET_LOAD_USER_DATA });
    } else {
      yield put({ type: types.NET_INIT });
    }
    const info = yield all({
      user: call(getInfo, user),
      apartments: call(getUserApartments, user),
      accounts: call(getUserAccounts, user),
      counters: call(getCounters, user)
    });
    const ui = yield select(getUi);
    if (!ui) {
      yield put({ type: types.NET_LOAD_UI });
      const ui = yield all({
        apartmentTypes: call(getApartmentTypes, user),
        serviceTypes: call(getServiceTypes, user),
        counterTypes: call(getCounterTypes, user),
      });
      yield put({ type: types.GET_UI_SUCCESS, ui });
    }
    yield put({ type: types.GET_MAIN_SCREEN_INFO_SUCCESS, info });
    yield put({ type: types.NET_END });

  } catch (err) {

    if (err.message === "Unauthorized") {
      yield put({ type: types.LOGOUT });
      yield put({ type: types.NET_END });
    }
    if (err.message === "Critical") {
      window.alert("Server critical error");
      yield put({ type: types.NET_END });
    }

  }
}
1
Alex Kumundzhiev