如何从 React 中的 Promise 获取响应体？

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) 而不是 call(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;
}

以上代码片段是apiCall在Saga中的实现。如果响应代码为预期的 403，它可以触发身份验证流程。

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

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

Answer 1

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

resp.then(resp => resp.json())
.then(json => {
    yield put({ type: UPDATE_DASHBOARD_CHART, charts: json });
});

如何从 React 中的 Promise 获取响应体？

How to get response body from a Promise in react?

promise

reactjs

redux-saga