前言

之前看PWA時(shí)，知道它使用的技術(shù)包括了fetch，然后就是把這些概念簡(jiǎn)單的記住，再多就不知道了。今天再看看fetch這個(gè)api，了解它的最好方法就是手寫(xiě)出來(lái)。

Fetch API 提供了一個(gè) JavaScript接口，用于訪(fǎng)問(wèn)和操縱HTTP管道的部分，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch()方法，該方法提供了一種簡(jiǎn)單，合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。

這種功能以前是使用 XMLHttpRequest實(shí)現(xiàn)的。Fetch提供了一個(gè)更好的替代方法，可以很容易地被其他技術(shù)使用，例如 Service Workers。

除此之外，F(xiàn)etch 還利用到了請(qǐng)求的異步特性——它是基于Promise的。

get請(qǐng)求

這里給大家推薦兩個(gè)網(wǎng)站：
http://jsonplaceholder.typicode.com/
http://myjson.com/

我這里用第二個(gè)網(wǎng)站，生成了一個(gè)JSON數(shù)據(jù)。

一個(gè)基本的 fetch請(qǐng)求設(shè)置起來(lái)很簡(jiǎn)單，這里發(fā)起一個(gè)get請(qǐng)求?？纯聪旅娴拇a：

fetch('https://api.myjson.com/bins/of6pw')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

調(diào)用fetch函數(shù)，傳入接口url，然后返回一個(gè)promise（response），為了獲取JSON的內(nèi)容，我們需要使用 json()方法，這個(gè)方法返回的也是一個(gè)promise。

輸出結(jié)果：

image.png

post請(qǐng)求

發(fā)起一個(gè)post請(qǐng)求，這里用到了第一個(gè)網(wǎng)站的接口：

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
        name: "ceido",
        age: 100
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))

輸出結(jié)果：

image.png

看起來(lái)這比XMLHttpRequest簡(jiǎn)潔多了，但是不知道現(xiàn)在的使用情況怎么樣，我知道的話(huà)就是在PWA中用到（然鵝現(xiàn)在PWA也悄無(wú)聲息了？），對(duì)于一般的HTTP庫(kù)如axios不知道有沒(méi)有封裝（沒(méi)有，基于xhr）。一個(gè)新事物的出現(xiàn)到普遍使用是需要時(shí)間的，且不知道其是否能活下去。

配合Service Worker使用，可以看看這里：http://www.itdecent.cn/p/778f37db5a49

參考：

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://zhuanlan.zhihu.com/p/28206325