在前端开发中，我们经常需要从服务器端获取数据。随着 Ajax 的出现，我们可以通过 XMLHttpRequest 对象与服务器进行交互。但是，XMLHttpRequest 的 API 设计不够直观，经常会产生一些困难。ES10 推出了一个新的 API：Fetch，让我们更加容易地与服务器进行通信，并提供了更好的错误处理和扩展性。
Fetch 的基本语法
Fetch 用法简单，语法如下：
fetch(url, options)
.then(response => response.json())
.then(data => {
// 处理获取到的数据
})
.catch(error => {
// 处理错误
});- url：请求的资源 URL。
- options：可选的请求配置对象，包含请求头、body 等信息。具体的配置属性可以参考 MDN。
- response：一个 Response 对象，包含响应的状态、头部信息等。
- data：响应体的数据，该例中使用
response.json()将 JSON 数据转换为 JavaScript 对象。 - error：Fetch 请求失败时抛出的 Error 对象。
Fetch 的优点
Fetch 带来了令人难以置信的好处。下面列举了一些。
跨域支持
使用 Fetch 时不用担心跨域问题。由于 Fetch 采用的是浏览器内置的协议，可以与任何协议（http、https、file、ftp）交互，而不需要额外的配置。
更好的错误处理
Fetch 采用 Promise 风格，让我们可以直接在 then() 方法中处理响应数据和错误。像 HttpRequest 那样的回调函数机制经常会导致混乱的代码。使用 Fetch 可以避免这一问题。
更好的扩展性
Fetch API 非常灵活，并支持扩展。可以自己编写一个函数，返回一个 Promise，并将这个函数暴露出去。然后在其他地方直接调用这个函数即可，不需要重新输入 URL 等信息。这使得代码变得具有可重用性。
Fetch 的缺点
虽然 Fetch API 有很多好处，但是也存在一些缺点。
对老版本浏览器的支持不足
Fetch API 对 IE 浏览器的支持不够友好。在 IE 下无法使用 Fetch API，因此这种方式无法满足企业级网络浏览器应用的开发需求。不过可以考虑使用类库 Polyfill 实现浏览器兼容性。
与 XMLHttpRequest API 相比可能更少的文档和例子
XMLHttpRequest API 自推出以来已经有十多年历史，因此有更多的文档和例子供使用者参考。相比之下，Fetch API 距离推出时间不久，因此可能有较少的例子用于参考。
用 Fetch 实现一个简单的数据请求
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));这段代码会请求 https://jsonplaceholder.typicode.com/posts/1，将收到的响应数据作为 Promise 输出，在控制台中输出。
用 Fetch 发送一个带有头部信息和请求类型的请求
-- -------------------- ---- -------
----- -------- - -
------ -------- ------
----- -------------
------- --
--
--------------------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- -------------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- --------------------这段代码将 postData 作为 JSON 格式的请求体，以 POST 请求方式提交到 https://jsonplaceholder.typicode.com/posts。请求头部信息有 'Content-Type': 'application/json'，表示请求体的格式。运行后输出响应体中的数据。
结论
Fetch API 通过简化网络请求操作，把异步的过程变得简洁明了。使用 Fetch API 总的来说更加安全和易于理解，对于前端开发来说，是十分必要的技能。同时要注意，相对于 XMLHttpRequest，Fetch 仍然处于新生的阶段，具有不确定的因素，但是它为前端开发中更好的网络交互提供了可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e2c7d5f551281025fec9c