如何使用Fetch API将数据返回给调用函数?

时间:2017-06-12 09:44:16

标签: reactjs fetch-api redux-saga

我正在尝试使用redux saga,我在尝试从API中获取数据时遇到了问题。我改变了我的API,我使用的是fetchjs而且遇到了一些麻烦。

问题是数据没有返回给调用函数,但是api正在接收数据。

这是我的Saga代码:

/* eslint-disable no-constant-condition */

import { put, call, takeEvery } from 'redux-saga';
import { delay } from 'redux-saga';
import RPC from "../../RPC";

export function* load_contacts() {
    console.log("Called"); // This part is printed
    try{
        const data = yield call(RPC.execute("contact","search_read_path",[[],["name","picture"]],{})); // *this is the calling function. nothing is returned.
        console.log("waiting for data",data); // this is not printed
        yield put({type:"CONTACTS_LOADED",payload:data});
    }
    catch (e) {
          yield put({type: "CONTACTS_LOAD_FAILED", message: e.message});
     }
}

export default function* rootSaga() {
  console.log(">> rootSaga");
  yield takeEvery('LOAD_CONTACTS', load_contacts)
}

这是我的API代码:

module.exports.execute=function(model,method,args,opts,cb) {
    console.info("rpc.execute",model,method,args,opts);
    if (!_rpc_base_url) throw "RPC base url is undefined";
    var params=[model,method];
    params.push(args);
    if (opts) {
        params.push(opts);
    }
    var headers={
        "Accept": "application/json",
        "Content-Type": "application/json",
    };
    if (_database) headers["X-Database"]=_database;
    if (_schema) headers["X-Schema"]=_schema;

    fetch(_rpc_base_url+"/json_rpc",{
        method: "POST",
        headers: headers,
        body: JSON.stringify({
            id: (new Date()).getTime(),
            method: "execute",
            params: params
        }),
    })
    .then((response) => response.json())
    .then((data)=>{
        console.log(data); // data is printed here
        return data} // doesnot return 
    )
    .catch((err) => {
        alert("upload error: "+err);
        if (result_cb) result_cb(err,null);
    })
};

我认为这与我使用fetch js(错误方式)有关。我找不到任何有用的解决方案。

如果使用回调,则更新

export function* load_contacts() {
    console.log("Called")
    try{
        const data ={};
        yield call(RPC.execute("contact","search_read_path",[[],["name","picture"]],{},(err,data)=>{
            if (err){
                alert(err);
                return
            }
            console.log("data inside is ",data)
            data = data
        }));
        console.log("waiting for data",data)
        yield put({type:"CONTACTS_LOADED",payload:data}); // this is called before the data is fetched causing error
    }
    catch (e) {
          yield put({type: "CONTACTS_LOAD_FAILED", message: e.message});
     }
}

RPC:

.then((response) => response.json())
.then((data)=>{
    if (data.error) {
        if (cb) cb(data.error.message,null);
    } else {
        //console.table(data.result);
        if (cb) cb(null,data.result);
    }
})

如果我这样做,会返回数据,但是我通过yield put

得到了一些例外
bundle.js:17692 uncaught at rootSaga 
 at takeEvery(LOAD_CONTACTS, load_contacts) 
 at load_contacts 
 TypeError: (0 , _reduxSaga.put) is not a function
    at load_contacts$ (http://localhost:8088/static/bundle.js:50254:47)
    at tryCatch (http://localhost:8088/static/bundle.js:93097:40)
    at Generator.invoke [as _invoke] (http://localhost:8088/static/bundle.js:93335:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:8088/static/bundle.js:93149:21)
    at next (http://localhost:8088/static/bundle.js:48139:27)
    at proc (http://localhost:8088/static/bundle.js:48098:3)
    at runForkEffect (http://localhost:8088/static/bundle.js:48374:19)
    at runEffect (http://localhost:8088/static/bundle.js:48261:872)
    at next (http://localhost:8088/static/bundle.js:48143:9)
    at currCb (http://localhost:8088/static/bundle.js:48215:7

我删除了try catch并删除了例外的yield put,但我仍然得到相同的错误,似乎问题是第一次收益率。

1 个答案:

答案 0 :(得分:1)

不确定您使用的redux-saga版本,但putcallfork等现在位于其他文件夹中

import { put, call, takeEvery } from 'redux-saga/effects';
相关问题