在响应之前获取API异步调用返回

-1

我有一个React-Redux Web应用程序需要获取数据并将其放入Redux存储以供以后使用。我调用函数来获取数据，但函数在设置响应之前会返回，并将操作发送为未定义的存储。我下面的工作：在响应之前获取API异步调用返回

function getFoo() 
{ 
    return fetch(url, { 
     headers: { 
     'Content-Type': 'application/json' 
     }, 
     method: 'post', 
     body: JSON.stringify(
      { 
       "foo":{}, 
       "bar":{} 
      } 
     ) 
    }).then((resp) => resp.json()) 
     .then(function(data){ 
      return data 
     }) 

} 

export const fooAction=() => { 

return { 
    type:'STORE_FOO', 
    result:getFoo() 
}; 
}

这并没有在执行处置工作，它返回[对象] [承诺]。

同样的事情发生这个功能太：

async function getFoo() { 

    try { 
     let response = await fetch(url, { 
            headers: { 
             'Content-Type': 'application/json' 
            }, 
            method: 'post', 
            body: JSON.stringify(
             { 
              "foo":{}, 
              "bar":{} 
             } 
            ), 
           }); 
     let data= await response.json() 
     return await data; 
    } catch (e) { 
     return e.message; 
    } 
}

我怎样才能得到真正的响应值，JSON对象，用我的行动，然后再继续？

来源

2017-07-14 bosada

首先，要在react-redux应用程序中处理异步调用，您应该使用redux-thunk作为中间件。

另外，你的动作函数应该派发动作，而不是仅仅返回对象。

export const fooAction =() => { 
    return dispatch => { 
    dispatch(
    type:'STORE_FOO', 
    result:getFoo() 
    }); 
}; 
}

来源

2017-07-14 12:10:02

我试图去习惯反应，终极版，我申请我的调度功能的容器.js文件如：'常量mapDispatchToProps =（派遣）=> { \t回{ \t \t onFoo：（） => {dispatch（fooAction（）}， \t} }'from the tutorials I look up。这是一个错误的实现吗？（'onFoo函数来自html onSubmit action。） – bosada

http://redux.js.org /docs/advanced/AsyncActions.html 只要完成一次这篇文章，它会给你一个关于如何创建异步操作的基本理解。 –

在响应之前获取API异步调用返回

回答

相关问题