在传奇故事中，如何在一部传奇中调用一部传奇？

Question

在我的React应用程序中，有一个Saga调用后端API来检索一些图表数据。请阅读源代码

function fetchData () {
    return fetch(`${config.base}dashboard_charts.json`)
    .then((response) => {

        if (response.status === 200) {
            return response.json();
        } else if (response.status === 403) {
             return 'logon';
        }
    });
}

function * getData (action) {
    try {
        const charts = yield call(fetchData);

        if (charts === 'logon') {
            yield logon();
        } else {
            yield put({ type: UPDATE_DASHBOARD_CHART, charts });
        }
    } catch (error) {
        yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] });
    }
}

function * logon (action) {
    yield auth();
}

export default function * portfolio () {
    yield [
        takeEvery(FETCH_DASHBOARD_CHART, getData)
    ];
};

对函数fetchData中的http响应状态进行检查，如果状态为200，则直接返回响应。但是，如果服务器端返回403，则意味着需要对客户端进行身份验证，因此程序将转到auth()并执行登录。

但是，http响应状态代码检查在某种程度上是应用于所有API调用的通用功能。所以我不想在每个传奇里重复这样的代码。为此，我编写了一个服务“responseHandler”，将响应代码检查分组如下：

export default function responseHandler (resp) {
    if (resp.status === 401 || resp.status === 403) {
        yield auth();
    } else if (resp.status === 200) {

    } else {
        console.log('error handling');
    }
};

它将在fetchData中被调用

return fetch(`${config.base}dashboard_charts.json`)
    .then((response) => {
        responseHandler(response);
    });

但这种方法从未奏效。在responseHandler中“产生auth()”是无效的。

有人能建议如何更好地为这种情况设计代码吗？

Answer 1

也许组织几个逻辑是有意义的？

首先，可以修改获取包装器，以便在响应代码的HTTP起源不满足成功结果形成期望的情况下，执行到catch部分的转换。它允许以纯承诺的形式保存fetchData函数，而不需要将生成器逻辑输入其中。

其次，auth和logon函数的本质并不是特别清楚。如果根据这些操作的结果生成登录表单，则通过适当的redux操作实现它。如果需要转换到其他页面，请使用react-redux-router。

function fetchData () {
        return fetch(`${config.base}dashboard_charts.json`).then(response => (
            (response.status === 200) ? response.json() : Promise.reject('logon')
        ));
    }

function* getData (action) {
    try {
        const charts = yield call(fetchData);
        yield put({ type: UPDATE_DASHBOARD_CHART, charts });
    } catch (error) {
        yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] });
        if(error.message === 'logon') {
            yield put({ type: PERMORM_AUTORIZE });
        }
    }
}

export default function * portfolio () {
    yield [ takeEvery(FETCH_DASHBOARD_CHART, getData) ];
};

而且您的逻辑比较复杂，只需使用来自redux-saga的redux-saga。它允许执行更复杂的任务。