HTTP是前端与服务器之间交互的基础协议，在Web开发中使用非常广泛。传统上，我们通过XMLHttpRequest (XHR) 对象来发送异步请求并获取响应数据。然而，现在更多的人开始使用Fetch API，因为它提供了一种更简洁、灵活和强大的方式来进行HTTP请求。
使用Fetch API
Fetch API 是浏览器自带的一个API，可以用于向服务器发送HTTP请求并获得响应。和XHR不同的是，Fetch API 风格更加简单优雅，代码也更易于阅读和维护。以下是一个使用fetch()方法获取JSON数据的示例：
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));上述代码使用了ES6的箭头函数语法。fetch()方法返回一个Promise对象，因此我们可以使用.then()方法来处理响应数据。在这个例子中，我们首先将响应解析为JSON格式，然后输出到控制台上。如果发生错误，则使用.catch()方法捕获异常并打印错误信息。
Fetch API 还允许我们设置请求的参数，例如请求方法、请求头、请求体等。以下是一个使用fetch()方法发送POST请求的示例：
-- -------------------- ---- -------
------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- ----- -----
------ ----------------------
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------在这个例子中，我们指定了请求的方法为POST，并设置了请求头的Content-Type为JSON格式。我们还通过JSON.stringify()将请求数据序列化为JSON字符串并放入请求体中。
Fetch API 的优势
与XHR相比，Fetch API 有以下优势：
语法简洁
Fetch API 的语法非常简洁明了，可以轻松地理解和使用。我们可以通过fetch()方法发送HTTP请求，并使用.then()或.catch()方法处理响应或错误。
Promise 风格
Fetch API 返回的是一个Promise对象，这使得我们更容易编写异步代码并处理复杂的异步流程。
支持流式数据
Fetch API 支持使用ReadableStream获取响应数据，这使得我们可以直接处理大型文件或流式数据。
默认支持CORS
Fetch API 默认支持跨域资源共享（CORS），不需要像XHR那样手动配置请求头。
总结
随着Web应用程序的不断发展，HTTP请求成为前端开发不可或缺的一部分。Fetch API 提供了一种更简洁、灵活和强大的方式来进行HTTP请求。它的语法简单明了，支持Promise风格的异步编程，同时还具有流式数据处理和默认的CORS支持等优点。在开发Web应用程序时，请考虑使用Fetch API来简化您的代码，并提高可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6724