Javascript 如何在变量获取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;
    })
}

导航组件是登录按钮所在的位置，因此我正在导入并使用我在

AuthService.js中创建的函数

当我将json结果记录在实际的getLoginToken函数中时，没有问题。因为在将它放入
.then（）
时，它会等待它完成，所以不会导致未定义

现在。。在Nav组件内部，有一个绑定到登录按钮的
onClick
函数，该函数将执行
AuthService.getLoginToken（电子邮件、密码）

实际问题：

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

我也试过：

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 Wait。或者，如果您正在执行redux，请使用redux thunk。
并在
getLoginToken
函数的开头添加一个
return
，以便返回链接承诺。然后，您可以使用第二个代码段中的语法—您不能在普通JavaScript函数中执行fetch，因为fetch仅在类扩展组件时才起作用。此外，除非您将其作为参数传递给function@Bergi在正常的JavaScript函数中，fetch可以工作吗？@请三思，为什么不能呢？它毕竟是一个可以从任何地方调用的函数。好吧，我认为fetch是绑定到组件的，但不是一个常规的JavaScript函数。像组件一样，在我们将它从组件传递到函数之前，它是不可用的，所以我认为fetch也可以以类似的方式工作。我已经实现了作为状态管理工具的Flux，我计划在
handleLogin
函数中设置承载令牌。这是正确的方法吗？请在负面标记时留下您的评论。我也想知道我错过了什么@Regentix我没有使用flux，因此无法确定正确的方法。但是，解决方案对您有效吗？