从 Fetch API 中获取数据到变量中 - Javascript

在Javascript中，Fetch API提供了一种简单、可靠的方法来从其他网站获取数据。在这篇文章中，我们会学习如何使用Fetch API来获取数据，并将数据存储到变量中。

使用Fetch API获取数据

我们可以使用fetch()函数来获取数据。例如，我们要从 https://jsonplaceholder.typicode.com/posts 获取数据，可以使用以下代码：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data));

在这段代码中，我们首先使用fetch()函数来发起一个网络请求。fetch()函数会返回一个Promise对象，我们可以使用.then()来处理请求成功后返回的响应数据。 .json()方法可将响应数据解析为JSON格式。在第二个.then()中，我们打印了JSON格式的数据。

将数据存储到变量中

在上面的例子中，我们只是在控制台中打印了数据。如果我们想要将数据存储在变量中以供以后使用，该怎么做呢？我们可以将fetch()的调用包装在一个函数中，并使用async/await来等待响应结果：

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await response.json()
  return data
}

const posts = await fetchData()
console.log(posts)

在这个例子中，我们创建了一个名为fetchData()的函数。该函数包含了前面介绍的fetch()操作，并返回我们想要获取的数据。调用这个函数并将它的结果存储在变量posts中，然后将posts打印到控制台中。

结论

使用Fetch API可以轻松地从其他网站获取数据，我们可以使用fetch()函数来获取数据，.then()方法来处理响应数据，或者使用async/await来等待响应结果并将数据存储在变量中。我们可以根据自己的需求来选择一种方法，在Javascript中获取和处理数据。