Javascript初學筆記 37 Promise學習紀錄(2)-fetch()

上一篇文章記錄了promise的基礎用法，這一篇則是進入到promise的應用-fetch。
fetch與ajax、axios等方法類似，都是用來請求資料的做法，現階段似乎是axios最為成熟，fetch身為最新的語法還有些封裝沒有做好的樣子。

基礎語法

fetch('API位置')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

簡易範例

//利用 https://github.com/15Dkatz/official_joke_api 所提供的笑話API做練習
const root = 'https://official-joke-api.appspot.com/random_ten'

//fetch預設為兩個參數，第二參數為選填，預設為method:get，還有許多其他的方法可使用
請參考https://developer.mozilla.org/zh-TW/docs/Web/API/GlobalFetch/fetch

fetch(root, { method: 'GET' })
  .then(response => console.log(response)) 

語法相當簡單，呼叫fetch API會回傳一個promise物件，接著我們用.then來處理該promise的回傳值(會是一個Response的實例)

乍看之下會認為沒有我們需要的資料，其實在Response物件內的Body為 ReadableStream 的實例，裡面就是我們想要的資料，但由於無法直接存取，需要透過以下手法來操作物件內容
.text()回傳的會是一長串的字串
.json()回傳json格式的物件
.blob() 回傳blob物件(我還沒碰過的東西)
我們先將原本的範例用.json做個修改

const root = 'https://official-joke-api.appspot.com/random_ten'
fetch(root, { method: 'GET' })
  .then(response => console.log(response.json())) 

最後再加上一次then的鍵結就可以取到我們想要的資料

const root = 'https://official-joke-api.appspot.com/random_ten'
fetch(root, { method: 'GET' })
  .then(response => response.json())
  .then(json => console.log(json)) 

以上就是fetch的基本使用方式，用法簡單，困難點還是在於此方法是基於promise，若沒有完全搞懂promise的概念之後在實作上一定會出問題~只好多下點功夫囉!

參考文章

鐵人賽：ES6 原生 Fetch 遠端資料方法
Promise 學習筆記 //推薦
MDN Using Fetch
The Fetch API //推薦