浏览器支持 fetch api - JavaScript

简介

fetch API 是一种用于在JavaScript中发送HTTP请求的新的Web API 方式，可以取代传统的XMLHttpRequest(XHR)方式，fetch api 返回Promise对象，并使用ES6中的新特性，比如arrow函数等，让异步请求更加容易编写和更加清晰易懂。

开始使用fetch API

为了罗列 fetch API 的简单易用性，请看代码示例：

fetch('https://api.github.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

fetch 函数接受一个参数——url路径，然后返回一个Promise。该Promise 解析时将响应 Response 对象传递给处理程序，响应对象包含有关响应的信息，例如状态码和响应头。上面的代码将响应数据解析为JSON，并带有一个处理程序来在控制台日志中打印数据，和一个错误处理程序。

fetch API 的支持

fetch API 目前仅在较新的浏览器中得到广泛支持。以下是浏览器支持情况的列表：

| | Chrome | Firefox | Safari | Edge | Opera | iOS Safari | Android Browser | WebView Android | |-------------------------------|--------|---------|--------|------|-------|------------|-----------------|-----------------| | fetch API | 42+ | 39+ | 10.1+ | 14+ | 29+ | 10.0+ | 4.4.4+ | 42+ |

fetch API 的优势

相对于旧的XMLHttpRequest对象，使用fetch API 有很多好处：

• 更加清晰易懂。fetch API 支持链式编写方法，易读易懂。而目前为止的 XMLHttpRequest写法结构很难让人理解。

• 更加容易使用。fetch 会自动把 JSON 响应文件转成 JavaScript 对象，从而为前端开发者省去了一些工作。

• 更加容易取消或重新发送请求。fetch API 允许您创建与请求关联的 AbortController 对象，并将其用于取消或重新发送请求。

• 更加容易使用 cookie。fetch API 的默认行为是不发送当前域的 cookie 这有助于防止跨站点请求伪造攻击（CSRF），但是 fetch API 提供了一个选项，您可以将 cookie 发送到请求的站点，这便于开发人员共享用户身份验证信息

缺点

尽管fetch API有很多优点，但它也有一些缺点：

• fetch API 不支持timeout功能，如果需要为请求设置timeout，需要使用其他的工具，例如Promise.race时序赛跑。

• 就像XMLHttpRequest一样，由于 fetch API 仍然是异步的，因此难以对多个请求有效地跟踪进度。

• fetch API 不支持 HTTP 方法 HEAD，因为HEAD请求通常不需响应主体，因此只获取元数据。

结论

Fetch API 对于发送 HTTP 请求，从而获取和使用数据，是一种伟大的现代工具。但是它也有一些局限性，必须谨慎使用。所幸大部分主流浏览器已经支持 fetch API，是时候考虑使用这项技术了。