如何在变量Fetch API中存储异步数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在变量Fetch API中存储异步数据相关的知识,希望对你有一定的参考价值。

我正在开发一个项目,使用Laravel作为后端,React作为前端。

每当用户点击登录时,将打开一个模态,在提交时将提取用户持有者令牌。

这些获取函数都位于AuthService.js

export function getLoginToken(email, password) {
    fetch("/api/login", {
        method: "post",
        credentials: 'include',
        headers: {
            'Accept': 'application/json',
            "Content-type": "application/json",
        },
        body: JSON.stringify({
            'email': email,
            'password': password
        })
    }).then((response) => response.json())
        .then((responseJSON) => {
        return responseJSON;
    })
}

Nav组件是登录按钮所在的位置,因此我导入并使用我在AuthService.js中创建的函数

当我在实际的getLoginToken函数中控制日志json结果时,没有问题。因为将它放在.then()中它等待它完成所以它不会导致未定义。

现在..在导航组件内部,有一个绑定到登录按钮的onClick函数,它将执行AuthService.getLoginToken(email, password)

实际问题:

我想将响应数据存储在变量中,但我一直未定义。这是因为我试图在同步函数中插入异步数据。

我也尝试过:

AuthService.getLoginToken(loginEmail, loginPassword).then((result) => {
            this.setState({
                token: result
            });
        });

但这也将返回:无法读取未定义的属性'then'。

有想法该怎么解决这个吗?

答案

试试这个

export function getLoginToken(email, password) {
  return fetch("/api/login", {
    method: "post",
    credentials: 'include',
    headers: {
        'Accept': 'application/json',
        "Content-type": "application/json",
    },
    body: JSON.stringify({
        'email': email,
        'password': password
    })
}).then((response) => response.json())
    .then((responseJSON) => {
    return responseJSON;
})
}

正确的方法是使用像redux这样的状态管理工具

另一答案

您可以使用async await。或者如果你正在使用redux,请使用redux-thunk。

以上是关于如何在变量Fetch API中存储异步数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用多个函数对 fetch 的结果求和?

使用 fetch 在节点中进行异步 api 调用的最佳实践?

如何使用 fetch 从一个模块导出从 GET API 获得的响应数据到另一个模块

使用 Fetch Streams API 异步消费分块数据而不使用递归

如何在javascript fetch中存储访问令牌并传递给下一个api调用

如何使用我使用 fetch API 调用检索到的数据更新 Reactjs 状态?