ajax与fetch的差异和优劣

相信很多前端开发的童鞋们还在使用$.ajax来作页面请求，这种传统jquery插件正慢慢失去优势力。但对于刚学js的新手却是一种不错的学习历程，jquery有很多思路值的我们借鉴。不需要太多的学习成本，简单易上手，包括现在大部份插件还是基于jq来写的。

我们知道 jQuery.ajax 是使用 XMLHttpRequest 对象来发送异步请求的。fetch api却是现代浏览器的标准原生接口，不要需封装，不需第三方库就可以使用。fetch api基于 Promise（如果你没有学过 Promise，强烈建议你学一学），也不用担心400或500的http错误导致脚本无法继续执行，因为它可以即时的返回这些状态。

我们来看看写法上的区别：

$.ajax

$.ajax('/').then(function(response){
    console.log(response)
})

fetch

fetch('/').then(function(response){
    response.text().then(function(text){
        console.log(text)
    })
})

在使用$.ajax前必须引入jquery框架，网络慢或版本不对还会导致脚本错误无法继续执行，而直接使用。目前浏览器支持统计情况可以看出，IE永远是开发者的疼。在国内的项目中，IE还是很大占有量。对于这种不支持的情况，后面也给出的备用方法。更多fetch可参考官方 https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

fetch和ajax 的主要区别

1、fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500
2、在默认情况下 fetch不会接受或者发送cookies

Fetch API 的问题

1、使用 fetch 无法取消一个请求。这是因为 Fetch API 基于 Promise，而 Promise 无法做到这一点。不过相信很快就会有对策。
2、所有的IE浏览器都不会支持 fetch()方法
3、服务器端返回 状态码 400 500的时候 不会reject
4、fetch没有办法原生监测请求的进度，而XHR可以
5、fetch默认不会带cookie，需要添加配置项

兼容性

有的浏览器没有 Fetch API，没有关系，只要引入一个 polyfill 就可以了：GitHub – github/fetch: A window.fetch JavaScript polyfill.

转载请注明：TUTERM.COM » ajax与fetch的差异和优劣