📌  相关文章
📜  从 json() javascript 获取 promise 结果(1)

📅  最后修改于: 2023-12-03 15:36:13.920000             🧑  作者: Mango

从 json() JavaScript 获取 Promise 结果

在使用 fetch() 方法从 API 端点获取数据时，我们通常会得到一个 Promise 对象，这个对象包含了响应结果的一些信息，以及一个可以解析为 JSON 格式数据的 json() 方法。

下面是一个例子：

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

在这个例子中，我们从一个 URL 请求数据，并使用 then() 方法获取到了响应。接下来，使用 json() 方法解析数据，并返回一个新的 Promise。最后，我们再次使用 then() 方法获取到了解析后的 JSON 数据。

在实际开发中，我们可能需要对获取到的 JSON 数据进行一些处理，例如渲染到页面上，或者将其存储到浏览器的本地存储中。下面给出一个更加完整的实例，演示了如何通过 fetch() 和 json() 方法获取数据，并渲染到 HTML 页面上：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>从 JSON 获取 Promise 结果</title>
  </head>
  <body>
    <ul id="data-list"></ul>
    <script>
      const dataList = document.getElementById('data-list')
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(data => {
          data.forEach(item => {
            const li = document.createElement('li')
            li.innerText = item.title
            dataList.appendChild(li)
          })
        })
        .catch(error => console.error(error))
    </script>
  </body>
</html>

在这个例子中，我们从 jsonplaceholder 网站获取到了一组博客文章数据，然后使用 forEach() 方法遍历数据，并渲染到 HTML 页面上的一个列表中。需要注意的是，在 HTML 页面中，我们使用了 ul 和 li 标签来表示列表结构，同时使用了 JavaScript 来创建和添加新的列表项。

除了以上内容，你可能还需要了解如何通过 async/await 来处理 Promise，以及如何在 Node.js 中使用 fetch() 获取数据，这些都是本题的深入探讨。