如何使用 ES7 async/await 和 fetch 来处理和展示数据-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要从后端获取数据并展示到页面上。在这个过程中，我们经常会遇到异步请求和数据处理的问题。ES7的async/await和fetch API可以帮助我们更加优雅地解决这些问题。

什么是async/await

async/await是ES7中的新特性，它是基于Promise实现的，可以更加方便地处理异步代码。

async/await的核心是async函数和await关键字。async函数是一个返回Promise对象的异步函数，它可以包含多个await表达式，每个表达式都会等待前面的表达式执行完成后再执行。

下面是一个使用async/await的例子：

// javascriptcn.com 代码示例
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => {
  console.log(data);
});

在这个例子中，fetchData是一个异步函数，它使用await关键字等待fetch和response.json()方法返回数据。fetch方法返回的是一个Promise对象，我们可以使用await关键字等待它的结果。response.json()方法也返回一个Promise对象，我们同样可以使用await关键字等待它的结果。

什么是fetch

fetch是一个新的API，它可以替代XMLHttpRequest对象发送HTTP请求。fetch函数返回的是一个Promise对象，可以使用async/await等待它的结果。

fetch的基本用法如下：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

在这个例子中，fetch函数发送了一个GET请求，并返回一个Promise对象。我们可以使用then方法等待响应结果，然后使用response.json()方法解析响应数据。

如何使用async/await和fetch来处理和展示数据

接下来我们将介绍如何使用async/await和fetch来处理和展示数据。我们将使用一个简单的例子来说明。

假设我们有一个后端API，它返回一个包含用户信息的JSON对象。我们需要从这个API获取数据，并在页面上展示出来。

首先，我们需要使用fetch函数发送一个GET请求，获取用户信息：

async function fetchUserData() {
  const response = await fetch('https://api.example.com/user');
  const userData = await response.json();
  return userData;
}

在这个例子中，我们定义了一个异步函数fetchUserData，它使用await关键字等待fetch函数返回响应结果，并使用response.json()方法解析响应数据。最后，它返回一个包含用户信息的JSON对象。

接下来，我们需要将用户信息展示到页面上。我们可以使用DOM操作来实现这个功能。

// javascriptcn.com 代码示例
async function displayUserData() {
  const userData = await fetchUserData();
  const nameElement = document.createElement('div');
  nameElement.textContent = `Name: ${userData.name}`;
  const emailElement = document.createElement('div');
  emailElement.textContent = `Email: ${userData.email}`;
  const phoneElement = document.createElement('div');
  phoneElement.textContent = `Phone: ${userData.phone}`;
  const userDataElement = document.createElement('div');
  userDataElement.appendChild(nameElement);
  userDataElement.appendChild(emailElement);
  userDataElement.appendChild(phoneElement);
  document.body.appendChild(userDataElement);
}

在这个例子中，我们定义了一个异步函数displayUserData，它使用await关键字等待fetchUserData函数返回用户信息，并使用DOM操作将用户信息展示到页面上。

最后，我们可以调用displayUserData函数来展示用户信息：

displayUserData();

总结

使用async/await和fetch可以更加优雅地处理异步请求和数据展示问题。在实际开发中，我们可以将它们应用到各种场景中，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ee626d2f5e1655d736c97