在响应之前提取 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()
});
};
}