引见
页面中需要向服务器要求数据时,基本上都邑运用Ajax来完成。Ajax的实质是运用XMLHttpRequest对象来要求数据。XMLHttpRequest的运用以下:
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.error('error');
};
xhr.send();
能够看出,XMLHttpRequest对象是经由过程事宜的形式来完成返回数据的处置惩罚的。现在另有一个是采纳Promise体式格局来处置惩罚数据的,这个手艺叫做Fetch。
Fetch的运用
运用Fetch完成要求的最基本代码:
fetch(url).then(function (response) {
return response.json(); // json返回数据
}).then(function (data) {
console.log(data); // 营业逻辑
}).catch(function (e) {
console.error('error');
})
运用ES6的箭头函数后,能够越发简约:
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.error('error'));
还能够运用ES7的async/await进一步简化代码:
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log('error');
}
如许,异步的要求能够根据同步的写法来写了。
Fetch修正head信息
fetch要领中另有第二个参数,第二个参数是用于修正要求的Head信息的。能够在里面指定method是GET照样POST;如果是跨域的话,能够指定mode为cors来处理跨域题目。
var headers = new Headers({
"Origin": "http://taobao.com"
});
headers.append("Content-Type", "text/plain");
var init = {
method: 'GET',
headers: headers,
mode: 'cors',
cache: 'default'
};
fetch(url, init).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.error('error'));