引见

页面中需要向服务器要求数据时，基本上都邑运用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'));