Fetch也是Ajax请求的一种实现方式，提供了除了XHR之外的另外一种选择，是现代主流浏览器都内置的一种实现方式。

那么为啥有了XHR还需要Fetch呢？因为XHR是基于事件回调的，那个时候还没有Promise，所以写起来并不友好，容易造成回调地狱，代码的可读性较差，所以基于XHR的缺点， Fetch被发明出来了。Fetch是基于Promise的所以写起来比较友好。

我们之前还介绍了AxiosAxios: HTTP请求界的扛把子 其实无论是Fetch还是Axios都是看到了XHR的缺陷，从而被提出的解决方案。只不过Fetch是浏览器的亲儿子，Axios只能算是亲戚家的孩子，但由于这个亲戚家得孩子太优秀，所以它还是中小开发者得第一选择。

内置对象：

Fetch是浏览器内置的，打开控制台输入下面的命令看看你的浏览器支不支持
console.log(fetch)

基本的使用：

我们这里写一个简单的例子，请求的地址是本地搭建的Mock接口(如何搭建一个Mock服务？)。



Fetch的使用注意：

1. response.ok 如果HTTP状态为200返回true，否则为false
2. fetch函数后面跟的第一个then无论是否成功都会进入执行，所以我们再这里面加了判断，非200请求不解析Body
3. catch可以捕获错误，例如: 网络错误，json格式错误。
4. Reponse中的流只能读一次，reponse.json()是解析HTTP响应体中的流数据为JSON对象，还可以有其他的读取解析方式，如reponse.text()读取为文本等等。详情可看官网: https://developer.mozilla.org/zh-CN/docs/Web/API/Response

XHR 还是 Fetch:

我们已经看到趋势，Fetch可能会越来越流行，我们在一些主流的网站中，包括Github，淘宝，知乎等等都能看到它的身影。我觉得Fetch和XHR不是替代关系，而应该是互补关系。在很多网站中包括上面提到得那些，我们可以同时看到Fetch和XHR两种类型得HTTP请求。

作为早期浏览器内置HTTP请求的实现，XHR还是使用非常广泛的，不过XHR的使用通常是被二次封装后使用。无论是早期的jQuery.ajax，还是被Axios框架都对XHR做了很好的封装。

Fetch作为新兴的（也好多年了，属于老新老新的），现代的不用引入第三方库的内置浏览器对象，开发新的浏览器项目的时候可以尝试下。

主观上来说，适合用监听模式的情况下可以选择XHR，其他的方式可以选择Fetch。

最终如果让我选，我选Axios，因为这个框架可以在XHR和Fetch之间切换，如何配置可以参考这里： https://axios.rest/pages/advanced/fetch-adaptor。