Question

在我的React应用程序中，我使用fetch从服务器端检索一些图表数据。如下所示，函数fetchData负责以json格式获取图表数据。我可以在Chrome的网络面板中看到通话成功。

function fetchData () {
    let token;
    if (sessionStorage.bearerToken) {
        token = `Bearer ${sessionStorage.bearerToken}`;
    }
    console.log('the token is', token);
    const config = {};
    config.method = 'GET';
    config.headers = {
        'Content-Type':'application/json',
        'Authorization':token
    };
    const req = new Request(webConfig.ReqURL.fetchChartsData, config);
    // return fetch(`${config.base}dashboard_charts.json`)
    return fetch(req)
    .then((response) => {
        return response;
    });
}

function * getData (action) {
    try {
        // const charts = yield call(fetchData);
        const resp = yield apiCall(fetchData);
        const charts = resp.then((resp) => { return resp.json(); });
        console.log('the charts....', charts);
        yield put({ type: UPDATE_DASHBOARD_CHART, charts: charts });
    } catch (error) {
        yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] });
    }
}

我需要添加http响应状态代码检查。如果状态代码是403，那么我需要应用程序重定向到登录流程。这就是我直接使用 apiCall（fetchData）而不是调用（fetchData）的原因。

export function* apiCall(fn, ...rest) {
    const response = yield call(fn, ...rest);
    const status = response.status;
    console.log('~~ status', status);
    if(status === 419) { //419: When the session has expired
        yield put(sessionExpired());
    }
    if(status === 403) { //403: When the resource is forbidden
        // yield put(resourceForbidden());
        yield auth();
        return Promise.reject(response);
    }
    if(status === 401) { //401: When the resource is unauthorized
        yield put(resourceUnauthorized());
    }

    return response;
}

上面的代码片段是在Saga中实现apiCall。如果响应代码为403，则它可以触发auth流程。

但是我不知道如何处理案例200的响应。我可以看到它返回一个Promise，但是在getData函数中我的console.log没有打印任何东西（或者说它没有被执行）。

我可以知道代码中的问题是什么吗？

Answer 1

response.json（）是一个承诺，应该用then来处理。以下代码应该有效：

tenants_amount

如何从Promise中获得响应体的反应？

1 个答案: