为什么要使用fetch
1,浏览器原生支持，不需要额外引入别的ajax库。
2，代替以前的XHR，是前端技术的前进方向。
3，可以搭配使用 async/await使用语法更简单。
fetch存在的缺陷
1，一些古董浏览器可能不会支持
2，fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
3，fetch默认不会带cookie，需要添加配置项
4，无法判断请求进行的状态
下面分别给出对于发送请求 fetch,原生ajax,jquery ajax,axios的写法（仅供参考）
1， 方式一 使用原生XHR发送请求
function XHRAjax(url, type， params) {
var xhr = new XMLHttpRequest();//创建啊一个XMLHttpRequest()实例
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr == 304) {
console.log(xhr.responseText)
} else {
console.log("request is fail" + xhr.status)
}
}
}
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置请求头
xhr.open(type, url, true);
xhr.send(params);
}
2，方式二 使用jquery ajax写法
function JQAjax(url, type, params) {
$.ajax({
type: type,
data: params,
contentType: 'application/x-www-form-urlencoded',
url: url,
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
}
})
}
3，方式三 使用axios写法
async function axiosAjax(url, type , params) {
var re = await axios({
url: url,
data: params,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
method: type
})
return re;
}
4， 方式四 使用fetch写法
async function fetchAjax(url, type, params) {
var response = await fetch(url, {
method: type,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: params
})
var re=await response.json;
return re;
}
通过对比以上几种写法，原生xhr写法太麻烦，还需自己处理浏览器兼容问题。jquery ajax其实很强大，jquery在以前普及率非常高，但现在已经被mvvc框架替代。axios当前也比较成熟，很多项目都在使用，可以结合async/await一起使用非常方便。使用fetch不需要引入别的ajax库，未来会越来越普及，但是使用过程中可能会遇到很多坑。个人建议，在项目开发尽量使用axios，个人学习上多使用fetch紧跟前端技术前进的步伐。
示例源码地址 https://github.com/panergongzi/ajaxDemo.git
网上也有很多大牛介绍了fetch相关的使用经验，下面贴几篇介绍fetch的文章和学习网站
1，《传统 Ajax 已死，Fetch 永生》,2，《fetch没有你想象的那么美》3，《fetch使用的常见问题及解决方法》
4，https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
网友评论