Question

我正在开发一个项目，该项目使用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函数中 in 控制台记录json结果时，没有问题。因为要把它放在.then()里面，所以它会等待它完成，以免导致不确定。

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

实际问题：

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

我也尝试过：

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

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

关于如何解决此问题的任何想法？

Answer 1

尝试一下

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这样的状态管理工具

Answer 2

您可以使用异步等待。或在进行redux时使用redux-thunk。

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

2 个答案: