一、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提供了丰富的选项和方法，可以更好地满足我们不同的请求需求。但也需要注意其兼容性问题，需要在使用时进行相应的浏览器兼容性处理。
