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()
 };
}

这对执行响应没有用，它返回[object] [Promise]。

这个功能也是如此：

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 app中处理异步调用，你应该使用redux-thunk作为中间件。

此外，您的动作函数应该分派动作，而不是仅仅返回对象。

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

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

1 个答案: