说到XMLHttpRequest估计你们都不陌生，通常我们说Ajax技术，就是指基于XMLHttpRequest的Ajax。他的一个demo是这样的：
// 首先，需要些一些特征检测来做下浏览器兼容
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
// 然后开启一个请求
request.open('GET', 'https://nodejs.org/api/http.json', true);
// 真正意义上的请求
request.send(null);
request.addEventListener('load', function() {
// 处理返回结果
})
就算不写兼容那段代码，光写后面发起请求的那段代码，也够我烦了。虽然说有很多第三方封装好的API就像jQuery.ajax().但是有没有更加简洁、方便的解决方案呢？答案是有的，这篇文章要介绍的内容就是XMLHttpRequest的最新替代技术——Fetch API。
浏览器兼容
从CaniUse报告中可以看出，意料中的IE全家完美不兼容。
不过可以参考github的fetch兼容解决方案,他可以解决一些兼容问题
| Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
PS：经过测试，微信的的渣5内核需要使用github的fetch兼容解决方案。
语法
fetch(input, init).then(function(response) { ... });
fetch()接受两个参数
input 参数，即可以直接传入一个 url，也可以传入一个 Request 对象;
init 参数是可选，是一个包含了请求方法，请求头部，请求主体，模式，凭证，缓存模式等配置的对象
返回的是一个 Promise。
一、简单的fetch示例
一个上面XHR一样的GET请求
fetch('https://nodejs.org/api/http.json')
.then(function(response) {
return // 响应处理
})
.catch(function(err) {
// 捕获错误
});
提交一个POST请求
fetch("http://www.example.org/submit.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(function(res) {
return // 响应处理
}, function(e) {
// 捕获错误
});
提交一个JOSN格式的POST请求
fetch('/submit-json', {
method: 'post',
body: JSON.stringify({
email: document.getElementById('email')
answer: document.getElementById('answer')
})
});
二、处理JSON
假如说，你需求发起一个JSON请求 — 返回的数据对象里有一个json方法，能将原始数据转化成JavaScript对象：
fetch('http://www.webhek.com/demo/arsenal.json')
.then(function(response) {
return response.json();
}).then(function(j) {
console.log(j);
});
其实它就是一个简单的JSON.parse(jsonString)调用，但是还是很方便的。
三、处理基本的Text/HTML响应
有时候我们需要的不是JSON而仅仅是普通的文本或者HTML,这个时候我们可以改用.text()
fetch('/next/page')
.then(function(response) {
return response.text();
}).then(function(text) {
// <!DOCTYPE ....
console.log(text);
});
四、配置headers
// url (required), options (optional)
fetch('/some/url', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
最后
想要更详细的文档可以点这。
fetch api 是简单好用，但是还是不稳定的，还在开发中的，所以在使用的时候，要考虑好兼容性。
Happy Hacking !! && have a nice day!!
#EOF#
