为什么无法在 redux-saga 生成器中捕获错误？

Question

这里是 store/store.js

...

const initSagaMiddleware = createSagaMiddleware();

const middlewares = [initSagaMiddleware, fetchPhotosMiddleware, putPhotoMiddleware];
const middlewareEnhancer = applyMiddleware(...middlewares);

...

initSagaMiddleware.run(rootSaga);

export default store;

sagas/api-saga.js

export default function* rootSaga() {
    yield all([
        photoWatcher()
    ]);
}

function* photoWatcher() {
    yield takeEvery(PUT_PHOTO, putPhotoWorker);
}

function* putPhotoWorker(action) {
    try {
        const payload = yield call(putPhoto, action.urlParams, action.body);
        yield put({ type: PHOTO_UPDATED, payload });
    } catch (err) {
        yield put({ type: API_ERROR_PUT_PHOTO, payload: err });
    }
}

和服务/api.js

export function putPhoto(urlParams, body) {
    return axios.put('/abc/' + urlParams.key + '/def/' + urlParams.id + '/edit', body)
        .then(res => {
            return res.data;
        })
        .catch(err => err);
}

我的问题是：即使我从 api 调用中得到错误，redux-saga putting PHOTO_UPDATED 而不是 API_ERROR_PUT_PHOTO。我究竟做错了什么？如何捕捉错误？

Answer 1

问题是您试图两次捕获相同的错误。只需从putPhoto 函数中删除catch，它应该可以工作。

export function putPhoto(urlParams, body) {
    return axios.put('/abc/' + urlParams.key + '/def/' + urlParams.id + '/edit', body)
        .then(res => {
            return res.data;
        });
}

Answer 2

then 和 catch 在 putPhoto 函数中的承诺都会导致 try 声明。因此，我放弃了try...catch，而是现在使用if...else 声明。像这样：

function* putPhotoWorker(action) {
    const payload = yield call(putPhoto, action.urlParams, action.body);
    if (isResponseTypeWhatIExpected) {
        yield put({ type: PHOTO_UPDATED, payload });
    } else {
        yield put({ type: API_ERROR_PUT_PHOTO, payload });
    }
}