首页 > 解决方案 > 使用 axios 进行昂贵的 api 调用会阻止可触摸,但在 react native 和 redux-saga 中不会使用 fetch

问题描述

我正在使用 redux saga 来处理反应原生应用程序中的 api 调用。这是使用 axios 时设置 saga 的方式:

function* getList(){
    try{
        response = yield call(axios.get,'https://example.com/list');
        yield put({type:'LIST_RESULTS',data:response.data});
    } catch(err){
        console.log(err);
    }
}
...
function* rootSaga(){
    yield takeLatest(types.GET_LIST,getList);
    ...
}

该调用获取大约 700kbs 的数据。当这个动作被调度时,所有的可触摸对象都没有响应,一旦收到响应,所有在请求进行时调用的事件都会被批量触发。

与 fetch 一起使用时相同的 api 请求没有相同的问题。这是使用 fetch 时的代码

function* getList(){
    try{
        response = yield call(fetch,'https://example.com');
        data = yield call(getJson,response);
        yield put({type:'LIST_RESULTS',data});
    } catch(err){
        console.log(err);
    }
}
async function getJson(data){
    return new Promise((resolve,reject)=>{
        data.json().then(result=>{
            resolve(result);
        }).catch(err=>{
            reject(err);
        });
    });
}

任何人都可以帮我调试这里的问题吗?

标签: react-nativereduxfetchaxiosredux-saga

解决方案


推荐阅读