Table of Contents

• fetch()
  • 請求方法
  • 抓取資料
• response body
• References

今天不討論AJAX的一些內容，主要想了解如何使用fetch()去抓網路資料。

fetch()

fetch()是一個全域的方法，執行之後如果得到回應，會回傳一個有Response回應物件的promise物件。通常只有在網路錯誤的情況下時，promise才會拒絕。
fetch()語法是fetch(resource, options)，第一個參數要放url，第二個則是一些可選參數，如果沒有設定，那在預設上就是GET。

請求方法

我一度以為「請求方法」是請求一筆資料，但實際上它是指示發送請求的方式，所以在fetch()的第二個參數中可以指定的method，這些方法通常與CRUD相對應，包含get、post、put、delete等。

抓取資料

首先今天使用Ajax Type Ahead with fetch() - #JavaScript30 6/30提供的資料來跑一次流程。

在使用fetch()時，可使用promise或async、await的語法，下面直接示範：

const webData = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

fetch(webData)
    //抓取response物件
  .then(response=>console.log(response))
    //如果沒有成功抓取，就報錯
  .catch(err=>console.log(err))

Response的屬性中，status是網頁的狀態碼，如果數字在200-299，那麽ok就是true。

response body

在我們得到response物件後，需要先透過幾個不同方法解析需要的資料：

• response.text()：將response解析成文字
• response.json()：將response解析成json
• response.blob()：以Blob的形式回傳response
• response.formdata()：使用在傳送表單的解析。

用上述json的方式來解析資料：

const webData = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

fetch(webData)
    //抓取response物件
  .then(response=>response.json())
  .then(data=>console.log(data))//(1000)[{…}, {…}, {…}...
    //如果沒有成功抓取，就報錯
  .catch(err=>console.log(err))

在嘗試這次的方法時，中間出了一些問題，比方說明明網頁狀態碼是200，卻依然回傳錯誤的問題，還有像是CORS的部份，以及Blob跟ArrayBuffer、file的關係，等以後再來研究;)

另外從明天開始到尾聲，內容會是Javascript30系列中找幾天在講像是canvas或播放器的主題，可當作了解Javascript30的教學或內容即可。（其實這篇也算，但我想把重點放在fetch的概念）

References

Fetch
AJAX與Fetch API
Fetch API

{JSON} Placeholder：Free fake API for testing and prototyping.（只是拿出來分享）