Как обрабатывать ошибки в ответах fetch() с помощью Redux-Saga?

Question

Я пытаюсь обработать Unauthorized ошибка с сервера с помощью redux-saga. Это моя сага:

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?

Answer 1

Не обрабатывайте then и error в вашем методе fetchUser и вашей саге. Поскольку у вас уже есть try/catch В вашей саге, вы можете с ней справиться.

Пример

Saga

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 «s API немного неудобно, потому что она возвращает then -able ответ, когда вы делаете запрос. Там много библиотек; лично я предпочитаю axios, который возвращает json по умолчанию.

Answer 2

, если вы хотите иметь, что если заявление подтверждения статуса ответа if(res.status >= 200 && res.status < 300) { вы должны иметь это в вашем первом обещании, где Рез определяется, это в настоящее время в разрешенном обещание для res.json()

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