随着前端开发的发展，异步编程已经成为了不可避免的一部分。在 ES7 中，我们可以使用 Async / Await 和 fetch API 来更加方便地获取 JSON 数据。
什么是 Async / Await
Async / Await 是 ES7 中新增的语法，它是基于 Promise 的一种更加简洁、易读、易写的异步编程方式。Async / Await 的基本语法如下：
async function foo() {
const result = await somePromise();
console.log(result);
}在上面的代码中，我们定义了一个 async 函数 foo，它在内部使用了关键字 await 来等待一个 Promise 对象的结果。这样写起来比使用 Promise 的 .then() 方法要更加简洁易读。
什么是 fetch API
Fetch API 是一个用于获取资源的 Web API，它是基于 Promise 的。Fetch API 提供了一个简单、强大、灵活的接口，可以轻松地获取数据，包括但不限于 JSON 数据。Fetch API 的基本语法如下：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
在上面的代码中，我们首先使用 fetch 函数来获取一个资源，然后使用 .then() 方法来处理这个资源的响应。在第一个 .then() 方法中，我们使用 response.json() 方法将响应转换为 JSON 数据，然后在第二个 .then() 方法中处理这个 JSON 数据。
如何结合 Async / Await 和 fetch API 来获取 JSON 数据
结合 Async / Await 和 fetch API 来获取 JSON 数据非常简单。我们可以使用 fetch 函数来获取 JSON 数据，然后使用 await 关键字来等待这个 JSON 数据的返回。下面是一个示例代码：
async function getJSON(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getJSON('https://api.github.com/users/github');在上面的代码中，我们定义了一个 getJSON 函数，它接收一个 URL 作为参数。在函数内部，我们使用 fetch 函数来获取这个 URL 对应的资源，并使用 response.json() 方法将响应转换为 JSON 数据。然后我们使用 await 关键字来等待这个 JSON 数据的返回，并在控制台中输出这个 JSON 数据。
总结
使用 Async / Await 和 fetch API 来获取 JSON 数据，可以让我们更加方便地进行异步编程。Async / Await 的语法简洁易读，而 fetch API 提供了一个灵活强大的接口来获取资源。结合起来，可以让我们更加方便地获取 JSON 数据，并且代码也更加易读易写。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658ec803eb4cecbf2d49a875