Tengo una saga que hace múltiples llamadas en ella:
function* membersInfoSaga({ payload }) { const endpoints = [ api.fetchNotifications, api.fetchPosts, api.fetchMessages, api.fetchActivities ] const responses = yield all(endpoints.map(endpoint => { try { return call(endpoint, payload.memberId, payload.page, payload.pageSize) } catch (error) { return { data: {} } } })) Cuando una llamada recibe 400 como respuesta, quiero que continúe para las demás y devuelva { data: {} } para la llamada fallida.
Estoy haciendo llamadas con Fetch API. Y aquí está mi api.js:
function callApi(endpoint, options, unauthorized, isRefreshToken) { const URL = BASE_URL + endpoint const ACCESS_TOKEN = localStorage.getItem("access_token") if (!options) options = {} options["headers"] = { "Content-Type": "application/json", "Accept": "application/json" } if (!unauthorized) { options.headers["Authorization"] = `Bearer ${ACCESS_TOKEN}` } return fetch(URL, options) .then((response) => response.json()) .then((response) => { if (response.code >= 200 && response.code <= 299) { return Promise.resolve(response) } else if (response.code === 401) { if (isRefreshToken) { store.dispatch({ type: actionTypes.AUTH_REFRESH_FAILED }) } else { store.dispatch({ type: actionTypes.INVALID_TOKEN, payload: { error: response.error.message } }) return { error: response.error.message } } } else { return Promise.reject(response.error.message) } }) .catch((error) => { return Promise.reject(error) }) }Y esta es la función que invoco dentro del método de llamada de saga:
const fetchNotifications = (memberId, page, pageSize) => callApi(`notifications/${memberId}?page=${page}&page_size=${pageSize}`)El problema en su código es que try..catch es donde llama al creador del efecto de call , pero no donde produce el objeto de efecto resultante. Por supuesto, tampoco puede ceder directamente dentro de una función de flecha. La forma de evitar esto es envolver el try..catch en un generador de saga adicional que luego será ejecutado por el efecto all .
const responses = yield all( endpoints.map((endpoint) => { return call(function* () { try { return yield call(endpoint, payload.memberId, payload.page, payload.pageSize); } catch (error) { return { data: {} }; } }); }) );He arreglado esto un poco diferente. Hice algunas actualizaciones en mi saga y ahora puedo hacer varias llamadas, incluso si algunas de ellas devuelven 400 como respuesta. Aquí está mi solución:
function* fetchMembersInfo(payload) { yield fork(membersNotificationsSaga, { payload }) yield fork(membersPostsSaga, { payload }) yield fork(membersMessagesSaga, { payload }) yield fork(membersActivitesSaga, { payload }) } const getNotifications = state => state.members.selectedAccount.notifications.data.notifications const getPosts = state => state.members.selectedAccount.posts.data.posts const getMessages = state => state.members.selectedAccount.messages.data.messages const getActvities = state => state.members.selectedAccount.activites.data.activities function* membersInfoSaga({ payload }) { try { yield call(fetchMembersInfo, payload) const notifications = yield select(getNotifications) const posts = yield select(getPosts) const messages = yield select(getMessages) const activites = yield select(getActivities) ... } catch (error) { ... } }