你還在用AJAX嗎？Fetch瞭解一下

什麼是Fetch

一句話總結：Fetch是XMLHttpRequest一個更先進的替代方案（A Modern Replacement for XMLHttpRequest）。 fetch是全局變量window的一個方法，用來發起網絡請求、獲取資源，是傳統基於XMLHttpRequest對象的AJAX技術的更優替代方案。 fetch暫時不支持abort request。

使用方法

先看一個最簡單的get用法示例：

// url (required), options (optional)
fetch('https://davidwalsh.name/some/url', {
	method: 'get'
}).then(function(response) {

}).catch(function(err) {
	// Error :(
});
複製代碼

下面是一個稍微複雜的post用法示例：

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "same-origin"
}).then(function(response) {
  response.status     //=> number 100-599
  response.statusText //=> String
  response.headers    //=> Headers
  response.url        //=> String

  return response.text()
}, function(error) {
  error.message //=> String
})
複製代碼

fetch使用Promises來處理response。fetch接收兩個參數：

• url：string類型，必選，發起請求的地址
• options：object類型，可選，請求的配置參數

還能夠使用Request對象實例做爲參數的方式發起fetch請求：

var request = new Request(url, options);
fetch(request).then(function(response) {
  // handle with response...
}).catch(function(err) {
  // Error :(
});
複製代碼

Options配置項

options能夠配置如下參數：

1.method (String) - HTTP 請求方法，默認："GET" 2.body (String, body types) - HTTP 請求主體，示例：

{
  body: new URLSearchParams([['foo', 1], ['bar', 2]]).toString()
}
複製代碼

body的類型包括：

Class	Default Content-Type
String	text/plain;charset=UTF-8
URLSearchParams	application/x-www-form-urlencoded;charset=UTF-8
FormData	multipart/form-data
Blob	inherited from the blob.type property
ArrayBuffer
TypedArray
DataView

其餘數據結構須要預先編碼爲上述類型之一。例如，JSON.stringify(data)可用於將數據結構序列化爲JSON字符串。

3.headers (Object, Headers) - 請求頭，默認：{}，示例：

{
  headers: new Headers({
    'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式爲表單提交
  }) 
}
複製代碼

headers提供如下方法增刪改查頭部信息：

• has(name) (boolean)
• get(name) (String)
• set(name, value)
• append(name, value)
• delete(name)
• forEach(function(value, name){ ... }, [thisContext])

4.credentials (String) - 跨域請求時方身份驗證憑證模式，默認："omit" "omit" - 請求中不攜帶身份驗證憑證（例如cookies） "same-origin" - 在對同一站點的請求中包含身份驗證憑證 "include" - 在全部站點的請求中包含身份驗證憑證

響應結果Response

Response表示來自服務器的HTTP響應。Response會做爲promise回調函數的參數。 包含如下屬性：

• status (number) - HTTP狀態碼，範圍在100–599以內
• statusText (String) - 響應文本，如："Unauthorized"
• ok (boolean) - status爲2xx時表示響應成功，值爲true
• headers (Headers)
• url (String)

此外，response還提供了一些方法處理成特定的數據格式並返回一個Promise:

• text() - 以字符串形式生成響應文本
• json() - 生成JSON.parse(responseText)的結果
• blob() - 生成一個Blob
• arrayBuffer() - 生成一個ArrayBuffer
• formData() - 生成可轉發到另外一個請求的表單數據

示例：

response.blob().then(function(myBlob) {
  // do something with myBlob
});
複製代碼

錯誤處理

若是出現網絡錯誤或其餘緣由致使HTTP請求沒法完成，fetch()的promise 將會reject該error。 注意，在HTTP 4xx或5xx服務器響應的狀況下，promise不會reject。這個promise將像HTTP 2xx同樣正常resolve。能夠經過檢查response.status的狀態碼來決定如何處理錯誤：

fetch(...).then(function(response) {
  if (response.ok) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
})
複製代碼

兼容狀況

截至目前，fetch的瀏覽器兼容狀況以下圖所示： （能夠在can I use這個網站查詢瀏覽器兼容性）

若是想要兼容IE及老版本瀏覽器，能夠使用polyfill：whatwg-fetch

Renerence

1.github.github.io/fetch/

2.louiszhai.github.io/2016/11/02/…

3.juejin.im/entry/57451…

4.davidwalsh.name/fetch