Javascript 如何使用async/await从fetch函数保存数据

守则：

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

const raw = JSON.stringify({
  email: "example@gmail.com",
  password: "password",
});

const requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: raw,
  redirect: "follow",
};

let data;

fetch("/users/login", requestOptions)
  .then((response) => response.text())
  .then((result) => {
    data = JSON.parse(result);
  })
  .catch((error) => console.log("error", error));

console.log(data);

我得到的结果是未定义的。

---

我想要的结果是fetch中的result对象以async/await存储在数据中。

您对

控制台的调用。在请求完成并接收数据之前，正在执行log

执行顺序与编写代码的顺序不同。可能的事件链是：

• 创建名为

  数据的未定义变量

• 使用fetch API向

  /users/login

  发出请求，该API将异步执行
• 调用

  console.log

  ，并引用仍然是

  未定义的
  数据

• 请求已完成，因此将回调传递给

  fetch。然后调用
  ，并定义
  数据

在处理

数据之前，您需要等待请求完成并解析响应

你可以用两种不同的方式来做。使用承诺：

let数据；
获取（“/users/login”，请求选项）
.然后（（response）=>response.text（））
。然后（（结果）=>{
data=JSON.parse（结果）；
//既然“数据”已经定义好了，我们可以用它做点什么
控制台日志（数据）；
})
.catch（（error）=>console.log（“error”，error））；

使用异步/等待

//注意async关键字
异步函数foobar（）{
让数据；
//注意wait关键字
等待获取（“/users/login”，requestOptions）
.然后（（response）=>response.text（））
。然后（（结果）=>{
data=JSON.parse（结果）；
})
.catch（（error）=>console.log（“error”，error））；
控制台日志（数据）；
}
//这个例子还有其他的改进
//让它更地道。例如：
异步函数foobar（）{
让数据；
//使用try/catch而不是'Promise.catch'`
试一试{
const response=wait fetch（'/users/login'，requestOptions）；
//在fetch响应对象上使用“.json”方法
data=wait response.json（）；
}捕获（错误）{
console.log（'error'，error）；
}
控制台日志（数据）；
}

需要注意的重要一点是，在承诺的上下文中发生的任何操作（在您的情况下，
数据的赋值
都将异步发生。该操作可能在任何给定时刻完成，也可能没有完成

目前，使用async/await通常被推荐为最佳实践。这需要ES6支持，但这通常是2020年给出的，在浏览器和节点中已经支持多年了

使用async/await可以让您编写异步代码，而不必担心“回调地狱”的承诺，还可以让您编写更具表现力和可读性的代码，更接近过程代码

使用async/await时需要记住的一点是，
await
关键字只能用于标记为与
async
关键字异步的函数中，如上例所示。
不能打印其值在异步块中初始化的变量

如果您将其更改为那样，它将正确打印数据

fetch（“/users/login”，requestOptions）
.然后（（response）=>response.text（））
。然后（（结果）=>{
const data=JSON.parse（结果）；
控制台日志（数据）；
})
.catch（（error）=>console.log（“error”，error））；

因此，要对此数据执行操作，您必须在then块中执行，因为它是此承诺的解析函数

否则，如果支持，您可以使用
async/await
语法。
简单地说，你可以这样做

const myHeaders=newheaders（）；
append（“内容类型”、“应用程序/json”）；
const raw=JSON.stringify({
电子邮件：“example@gmail.com",
密码：“密码”，
});
常量请求选项={
方法：“张贴”，
标题：myHeaders，
身体：生的，
重定向：“跟随”，
};
试一试{
const data=wait fetch（“/users/login”，requestOptions）；
控制台日志（数据）；
捕捉（错误）{
console.log（'error'，err）；
}