網絡請求系列（一）——Fetch

什麼是Fetch

Fetch是全局對象window的一個方發，是XMLHttpRequest一個更現代化的替代方案。
Fetch暫時不支持abort request。
Fetch是基於promise的。

使用方法

Fetch返回一個promise，能夠使用then來處理結果，或者搭配async/await使用。
let promise = fetch(url, [options])

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

// url (required), options (optional)
fetch('https://davidwalsh.name/some/url', {
  method: 'get'
}).then(function(response) {
  // 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() - 生成可轉發到另外一個請求的表單數據

獲取響應一般須要通過兩個階段：

1. 第一階段，當服務器發送了響應頭，promise 就使用其內建的 Response 類來解析該對象，經過檢測HTTP狀態來肯定請求是否成功，或者當響應體尚未返回時，經過檢查響應頭來肯定狀態。
   
2. 第二階段，爲了獲取響應體，須要調用上述text()等方法來獲取不一樣格式的響應正文。可是要注意只能選擇其中一種解析響應體的方式，例如若是調用response.text() 方法來獲取 response，而後再用 response.json() 方法是不會生效的，由於正文內容已經被處理過了。 例如獲取一個圖片文件：

let response = await fetch('/article/fetch/logo-fetch.svg');
let blob = await response.blob(); // 以 Blob 對象下載
img.src = URL.createObjectURL(blob);
複製代碼

錯誤處理

若是出現網絡錯誤或其餘緣由致使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.cn/post/684490…

4.davidwalsh.name/fetch