Fetch API

Fetch API

一個隱藏最深的秘密就是AJAX的實現底層的XMLHttpRequest，這個方法本來並不是造出來干這事的。現在有很多優雅的API包裝XHR，但是這遠遠不夠。於是有了fetch API。我們來看看這個API的基本用法。最新的瀏覽器都已經支持這個方法了。

XMLHttpRequest

XHR對於我來說太過復雜，用起來大概是這樣的：

// 開始XHR這些
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  } 
  catch (e) {
    try {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {}
  }
}

// 發送請求.
request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);

當然我們的JavaScript框架可以讓我們願意去用XHR，但是你看到的只是一個簡單的例子。

基本的Fetch用法

fetch方法可以在window作用域中找到。第一個參數是你要訪問的URL：

fetch('https://davidwalsh.name/some/url', {
	method: 'get'
}).then(function(response) {
	
}).catch(function(err) {
	// Error :(
});

fetch會返回一個Promise作為結果：

// 簡單的返回結果處理
fetch('https://davidwalsh.name/some/url').then(function(response) {
	
}).catch(function(err) {
	// Error :(
});

// 更高級的鏈式處理
fetch('https://davidwalsh.name/some/url').then(function(response) {
	return //...
}).then(function(returnedValue) {
	// ...
}).catch(function(err) {
	// Error :(
});

Request頭

請求能不能靈活使用就在於是否能靈活的設置請求的頭。可以使用new Headers():

// 創建一個空的Headers實例
var headers = new Headers();

// 添加內容
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');

// 檢查Headers的值
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');

// 刪除一個Header
headers.delete('X-My-Custom-Header');

// 添加初始值
var headers = new Headers({
	'Content-Type': 'text/plain',
	'X-My-Custom-Header': 'CustomValue'
});

你可以使用append, has, get, set和delete方法來設置請求的頭。要使用Request頭，需要創建一個Request實例：

var request = new Request('https://davidwalsh.name/some-url', {
	headers: new Headers({
		'Content-Type': 'text/plain'
	})
});

fetch(request).then(function() { /* handle response */ });

我們來看看Response和Request都可以做什么。

Request

一個Request實例代表了一個fetch的請求部分。給fetch 傳入一個request你可以發出高級的、定制的請求：

• method - GET, POST, PUT, DELETE, HEAD
• url - URL of the request
• headers - associated Headers object
• referrer - referrer of the request
• mode - cors, no-cors, same-origin
• credentials - should cookies go with the request? omit, same-origin
• redirect - follow, error, manual
• integrity - subresource integrity value
• cache - cache mode (default, reload, no-cache)

一個簡單的Request看起來是這樣的：

var request = new Request('https://davidwalsh.name/users.json', {
	method: 'POST', 
	mode: 'cors', 
	redirect: 'follow',
	headers: new Headers({
		'Content-Type': 'text/plain'
	})
});

// 用起來
fetch(request).then(function() { /* handle response */ });

只有第一個參數，請求的URL，是必須的。一旦Request創建，它所有的屬性都是只讀的。需要注意的是Request有一個clone方法，這個方法在Worker API里使用fetch 的時候很有用。fetch的簡化調用方法：

fetch('https://davidwalsh.name/users.json', {
	method: 'POST', 
	mode: 'cors', 
	redirect: 'follow',
	headers: new Headers({
		'Content-Type': 'text/plain'
	})
}).then(function() { /* handle response */ });

Respone

使用fetch的then方法會獲得一個Response實例。你也可以自己創建一個。

• type - basic, cors
• url
• useFinalURL - Boolean for if url is the final URL
• status - status code (ex: 200, 404, etc.)
• ok - Boolean for successful response (status in the range 200-299)
• statusText - status code (ex: OK)
• headers - Headers object associated with the response.

// 在service worker測試的時候
// 使用new Response(BODY, OPTIONS)創建一個response
var response = new Response('.....', {
	ok: false,
	status: 404,
	url: '/'
});

// The fetch的 `then`會獲得一個response實例
fetch('https://davidwalsh.name/')
	.then(function(responseObj) {
		console.log('status: ', responseObj.status);
	});

Response實例也提供了如下的方法：

• clone() - Creates a clone of a Response object.
• error() - Returns a new Response object associated with a network error.
• redirect() - Creates a new response with a different URL.
• arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
• blob() - Returns a promise that resolves with a Blob.
• formData() - Returns a promise that resolves with a FormData object.
• json() - Returns a promise that resolves with a JSON object.
• text() - Returns a promise that resolves with a USVString (text).

處理JSON

假設你有一個請求會返回JSON。

fetch('https://davidwalsh.name/demo/arsenal.json').then(function(response) { 
	// Convert to JSON
	return response.json();
}).then(function(j) {
	// Yay, `j` is a JavaScript object
	console.log(j); 
});

當然也可以用JSON.parse(jsonString)，但是json方法更加簡單易用。

處理基本的Text/HTML返回

不是所有的接口都返回JSON格式的數據，所以還要處理一些Text/HTML類型的返回結果。

fetch('/next/page')
  .then(function(response) {
    return response.text();
  }).then(function(text) { 
  	// <!DOCTYPE ....
  	console.log(text); 
  });

處理Blob返回

如果你想要通過fetch加載一個blob的話，會有一點不同：

fetch('https://davidwalsh.name/flowers.jpg')
	.then(function(response) {
	  return response.blob();
	})
	.then(function(imageBlob) {
	  document.querySelector('img').src = URL.createObjectURL(imageBlob);
	});

POST Form數據

另一個經常會遇到的情況是使用AJAX提交表單數據。

fetch('https://davidwalsh.name/submit', {
	method: 'post',
	body: new FormData(document.getElementById('comment-form'))
});

最后

fetchAPI很好用，但是現在還不允許取消一個請求。無論如何，有了fetch之后，我們可以簡單的發出AJAX請求了。更多關於fetch 的內容可以參考Github下他們的repo。