摘要：實(shí)例生成以后，可以用方法分別指定方法和方法的回調(diào)函數(shù)。創(chuàng)建一個(gè)對(duì)象異步操作成功方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)。第一個(gè)回調(diào)函數(shù)是對(duì)象的狀態(tài)變?yōu)闀r(shí)調(diào)用，第二個(gè)回調(diào)函數(shù)是對(duì)象的狀態(tài)變?yōu)闀r(shí)調(diào)用。

由于 FetchAPI 是基于 Promise 設(shè)計(jì)，有必要先學(xué)習(xí)一下 Promise，推薦閱讀 MDN Promise 教程
本文章內(nèi)容推薦閱讀 MDN Fetch 教程

fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})

具體參數(shù)案例：

//兼容包
require("babel-polyfill")
require("es6-promise").polyfill()

import "whatwg-fetch"

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

  response.text().then(function(responseText) { ... })
}, function(error) {
  error.message //=> String
})

定義要獲取的資源。這可能是：

一個(gè) USVString 字符串，包含要獲取資源的 URL。

一個(gè) Request 對(duì)象。

一個(gè)配置項(xiàng)對(duì)象，包括所有對(duì)請(qǐng)求的設(shè)置。可選的參數(shù)有：

method: 請(qǐng)求使用的方法，如 GET、POST。

headers: 請(qǐng)求的頭信息，形式為 Headers 對(duì)象或 ByteString。

body: 請(qǐng)求的 body 信息：可能是一個(gè) Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對(duì)象。注意 GET 或 HEAD 方法的請(qǐng)求不能包含 body 信息。

mode: 請(qǐng)求的模式，如 cors、 no-cors 或者 same-origin。

credentials: 請(qǐng)求的 credentials，如 omit、same-origin 或者 include。

cache: 請(qǐng)求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

一個(gè) Promise，resolve 時(shí)回傳 Response 對(duì)象：

屬性：

status (number) - HTTP請(qǐng)求結(jié)果參數(shù)，在100–599 范圍

statusText (String) - 服務(wù)器返回的狀態(tài)報(bào)告

ok (boolean) - 如果返回200表示請(qǐng)求成功則為true

headers (Headers) - 返回頭部信息，下面詳細(xì)介紹

url (String) - 請(qǐng)求的地址

方法：

text() - 以string的形式生成請(qǐng)求text

json() - 生成JSON.parse(responseText)的結(jié)果

blob() - 生成一個(gè)Blob

arrayBuffer() - 生成一個(gè)ArrayBuffer

formData() - 生成格式化的數(shù)據(jù)，可用于其他的請(qǐng)求

其他方法：

clone()

Response.error()

Response.redirect()

has(name) (boolean) - 判斷是否存在該信息頭

get(name) (String) - 獲取信息頭的數(shù)據(jù)

getAll(name) (Array) - 獲取所有頭部數(shù)據(jù)

set(name, value) - 設(shè)置信息頭的參數(shù)

append(name, value) - 添加header的內(nèi)容

delete(name) - 刪除header的信息

forEach(function(value, name){ ... }, [thisContext]) - 循環(huán)讀取header的信息

HTML

fetch("/users.html")
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

IMAGE

var myImage = document.querySelector("img");

fetch("flowers.jpg")
  .then(function(response) {
    return response.blob();
  })
  .then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });

JSON

fetch(url)
  .then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  }).catch(function(e) {
    console.log("Oops, error");
  });

使用 ES6 的 箭頭函數(shù) 后：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

response的數(shù)據(jù)

fetch("/users.json").then(function(response) {
  console.log(response.headers.get("Content-Type"))
  console.log(response.headers.get("Date"))
  console.log(response.status)
  console.log(response.statusText)
})

fetch("/users", {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Hubot",
    login: "hubot",
  })
})

檢查請(qǐng)求狀態(tài)

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch("/users")
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log("request succeeded with JSON response", data)
  }).catch(function(error) {
    console.log("request failed", error)
  })

Promise 對(duì)象是一個(gè)返回值的代理，這個(gè)返回值在promise對(duì)象創(chuàng)建時(shí)未必已知。它允許你為異步操作的成功或失敗指定處理方法。 這使得異步方法可以像同步方法那樣返回值：異步方法會(huì)返回一個(gè)包含了原返回值的 promise 對(duì)象來(lái)替代原返回值。

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve方法和reject方法。如果異步操作成功，則用resolve方法將Promise對(duì)象的狀態(tài)變?yōu)椤俺晒Α保磸膒ending變?yōu)閞esolved）；如果異步操作失敗，則用reject方法將狀態(tài)變?yōu)椤笆　保磸膒ending變?yōu)閞ejected）。

promise實(shí)例生成以后，可以用then方法分別指定resolve方法和reject方法的回調(diào)函數(shù)。

//創(chuàng)建一個(gè)promise對(duì)象
var promise = new Promise(function(resolve, reject) {
  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
//then方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)。
//第一個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)镽esolved時(shí)調(diào)用，第二個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)镽eject時(shí)調(diào)用。
//其中，第二個(gè)函數(shù)是可選的，不一定要提供。這兩個(gè)函數(shù)都接受Promise對(duì)象傳出的值作為參數(shù)。
promise.then(function(value) {
  // success
}, function(value) {
  // failure
});

那么結(jié)合promise后fetch的用法：

//Fetch.js
export function Fetch(url, options) {
  options.body = JSON.stringify(options.body)

  const defer = new Promise((resolve, reject) => {
    fetch(url, options)
      .then(response => {
        return response.json()
      })
      .then(data => {
        if (data.code === 0) {
          resolve(data) //返回成功數(shù)據(jù)
        } else {
            if (data.code === 401) {
            //失敗后的一種狀態(tài)
            } else {
            //失敗的另一種狀態(tài)
            }
          reject(data) //返回失敗數(shù)據(jù)
        }
      })
      .catch(error => {
        //捕獲異常
        console.log(error.msg)
        reject() 
      })
  })

  return defer
}

調(diào)用Fech方法：

import { Fetch } from "./Fetch"

Fetch(getAPI("search"), {
  method: "POST",
  options
})
.then(data => {
  console.log(data)
})

原生支持率并不高，幸運(yùn)的是，引入下面這些 polyfill 后可以完美支持 IE8+ ：

由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham

引入 Promise 的 polyfill: es6-promise

引入 fetch 探測(cè)庫(kù)：fetch-detector

引入 fetch 的 polyfill: fetch-ie8

可選：如果你還使用了 jsonp，引入 fetch-jsonp

可選：開(kāi)啟 Babel 的 runtime 模式，現(xiàn)在就使用 async/await

翻譯自 Fetch