Ajax與Fetch

介紹

頁面中須要向服務器請求數據時，基本上都會使用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'));