深入理解FetchAPI

一、fetch的基本概念

当我们需要从远程URL获取资源时，可以使用XMLHttpRequest对象从服务器或某个URL中获取信息，然而，由于其API不是原生的，而且使用不太方便，因此，现在大多数开发人员使用fetch API进行网络请求。

Fetch API是一个现代的网络请求API，旨在替代XMLHttpRequest和jQuery Ajax等老式方式。 它提供了许多丰富的功能，如Promise，异步/等待，请求/响应模式等，使得开发人员能够更快地获取和管理网络资源。

二、fetch的常用用法

1. fetch的基本使用方法

fetch(url).then(response => response.json()).then(data => console.log(data)).catch(error => console.log(error));

fetch返回的是一个Promise对象，我们可以通过then方法和catch方法来对fetch返回的结果进行处理。

2. fetch的请求选项

fetch(url, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username: 'example'})})

使用fetch时可以提供一个可选的options参数，options中可以设置请求的方法、请求头、请求主体等选项。

3. fetch的请求模式

fetch(url, {mode: 'no-cors'})

Fetch API可以使用多种请求模式，例如cors, no-cors, same-origin, navigate。 ‘no-cors’意味着请求永远不会设置CORS请求头，因此不会引发CORS预检。这种模式在你想在当前页面内嵌加载一个像Google Fonts之类的外部资源时非常有用。

三、fetch的响应处理

1. fetch的响应类型

fetch(url).then(response => response.text())

Response对象中的很多方法都是根据响应的类型来处理的，例如，我们可以使用text()、json()、blob()等方法来将返回的响应处理成不同类型的数据。

2. 自定义fetch响应

class CustomResponse extends Response {
constructor(data) {
super(data);
this.data = data;
}
}
fetch(url).then(response => {
let customResponse = new CustomResponse(response);
return customResponse.json();
})

我们可以自定义Response的子类，以实现自定义的响应数据类型和其他数据操作

四、fetch的兼容性处理

在旧版本的浏览器中（如IE，Safari），fetch API不被支持。 为了解决这个问题,我们可以使用对应回调的传统XMLHttpRequest API对象，或使用Polyfill库 (如whatwg-fetch)来支持旧版浏览器上的fetch API方法。

五、总结

通过本文，我们可以深入的理解fetch API的使用方法、请求选项、请求模式、响应处理以及兼容性处理。fetch API提供了丰富的选项和方法，可以更好地满足我们不同的请求需求。但也需要注意其兼容性问题，需要在使用时进行相应的浏览器兼容性处理。