Jak radzić sobie z błędami w odpowiedziach pobierania() z Redux-Sagą?

Question

Próbuję obsłużyć błąd Unauthorized z serwera za pomocą redux-saga. To jest moja 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}); 
    } 
} 

mogę pobrać dane tak:

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}); 
} 

Ale i tak wynik jest {type: 'LOG_IN_SUCCEEDED', user: undefined} kiedy spodziewać {type: 'LOG_IN_FAILED', error: 'Unauthorized'}. Gdzie jest mój błąd? Jak radzić sobie z błędami przy użyciu Redux-Sagi?

Answer 1

Nie obsługuj then i error w swojej metodzie fetchUser i swojej sadze. Ponieważ jesteś już w swojej sadze try/catch, możesz sobie z tym poradzić.

Przykład

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) 
    }) 
} 

Na marginesie: Uważam fetch „s api trochę niewygodne, ponieważ zwraca then -able odpowiedź podczas dokonywania prośba. Istnieje wiele bibliotek; osobiście wolę axios, który domyślnie zwraca json.

Answer 2

jeśli chcesz mieć, że jeśli oświadczenie potwierdzające status odpowiedzi if(res.status >= 200 && res.status < 300) { trzeba mieć go wewnątrz pierwszej obietnicy gdzie res jest zdefiniowana, to obecnie wewnątrz rozwiązany obietnicą dla res.json()

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