前言
现在，前端开发的主流技术一般是以 Web 应用为主的，而 Web 应用的核心就是 HTTP 协议，RESTful API 就是目前最常用的 Web 应用技术之一，因此，JavaScript 向 RESTful API 发送请求，获取数据也就成为前端开发中的重要环节。
Fetch API 是 Web 浏览器中，向服务器获取资源的新的标准接口，它的出现极大的简化了前端开发人员发送HTTP请求的代码复杂度。
本篇文章将会详细介绍如何使用 Fetch API 向 RESTful API 发送请求，获取数据并展示在前端页面。
简介
Fetch API 是继 XHR 的一种新的 API，旨在提供更好更强大的方式来发送 HTTP 请求和响应。Fetch API 最大的好处是可以方便地使用 Promise 来处理异步请求和响应。
我们可以使用 fetch() 函数对资源进行请求，此函数会返回一个 Promise 对象。fetch() 函数用于发起某个请求，需要传递 URL 参数和其它可选参数。
Fetch API 使用起来非常简单，只需几行代码就能完成一个请求，如下所示。
fetch(url) .then(response => response.json()) .then(data => console.log(data))
使用 Fetch API 请求 RESTful API
在使用 Fetch API 请求 RESTful API 时，需要遵循 RESTful 的规范。
以下是一些常用的 HTTP 请求方法：
- GET：获取数据
- POST：新建数据
- PUT：更新数据
- DELETE：删除数据
下面以 GET 请求为例，通过发送一个 HTTP GET 请求获取 RESTful API 返回的一组数据，并解析返回的 JSON。
fetch('http://localhost/api')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});上述代码中，fetch() 函数发起了一个 GET 请求，返回的 JSON 数据通过 then() 方法进一步处理，catch() 方法用于捕获请求出现的错误。
接下来，我们将使用一个更加完整的示例来演示 Fetch API 请求 RESTful API 的使用。
-- -------------------- ---- -------
----- --- - -----------------------
----------
-------------- -- -
-- ------------- -
------ ----------------
-
----- --------------
--
---------- -- -
-- -------------
------------------
--
------------ -- -
---------------------
---上述代码中，我们增加了一个判断语句，判断请求是否成功，如果成功，则返回 JSON 数据并进一步处理。如果失败，则抛出错误信息。
总结
通过本篇文章的学习，我们了解了 Fetch API 的具体使用和如何向 RESTful API 发送 HTTP 请求以及如何解析返回的 JSON 数据。在实际应用中，我们可以根据需要选择不同的 HTTP 请求方法以及在请求中附带参数，从而获取到相应的数据并在前端页面进行展示。
使用 Fetch API 可以简化前端开发人员的代码复杂度，是现代 Web 应用最常用的技术之一。因此，深入掌握 Fetch API 对于提高前端开发人员的工作效率具有非常重要的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8fa9d5ad90b6d04153639