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

Question

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

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对象，用我的行动，然后再继续？

Answer 1

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

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

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