JS 筆記 -ES6：fetch 取得遠端資料

本篇使用此 API 做為範例

fetch 起手式

有點像 jQuery 跟 axios，

fetch("網址")
  .then(function (response) {
    // 處理 response
  })
  .catch(function (err) {
    // 錯誤處理
  });

但還是有些許不同，要先確定回傳的形式是什麼，範例是回傳 JSON 格式，還可以使用 text() 跟 blob()。

fetch(url)
  .then((response) => {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson); //在這裡才能在 console 看到整個資料
  });

ReadableStream

Fetch API 的 Response 物件中的 body 屬性提供了一個 ReadableStream 的實體，這個階段我們無法直接讀取資料內容，而 ReadableStream 物件中可用以下對應的方法來取得資料 (https://developer.mozilla.org/zh-TW/docs/Web/API/Body)：

arrayBuffer()
blob()
formData()
json()
text()

fetch 和 jQuery.ajax() 有兩個主要的差異

fetch() 回傳的 promise 物件, resolve 和 reject 的使用方式有差異, 當遇到 HTTP Status 404, 500 時會使用 resolve 但會將 status 的值從 ok 變為 false， reject 只有在網路發生錯誤或是任何會中斷網路請求時才會使用。
fetch 預設上不傳送或接收任何 cookies，如果網站依賴 session 會導致請求回傳未經認證，需要使用 cookies 必須額外設定 credentials。

實務使用

取得六角學院舉辦的 JS 特訓班完成關卡 API

let dataUrl =
  "https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";
let data = [];
let list = document.querySelector(".list");

fetch(dataUrl)
  .then((response) => {
    return response.json();
  })
  .then((dataList) => {
    data = dataList;
    console.log(data); //確認取得資料
    render();
  });

function render() {
  let str = "";
  data.forEach((item) => {
    str += `
        <li>名字：${item.name}，完成率：${item.process}</li>
      `;
  });
  list.innerHTML = str;
}

CodePen https://codepen.io/hnzxewqw/pen/abdrYbm

台北市政府資料開放平台 - 親子館 API

這邊記錄一下取得這個 API 的地方，因為 dataList 取得的事物件資料，所以要網內取得該值，API 結構中還有 result.results。

let dataUrl =
  "https://data.taipei/api/v1/dataset/5c09f39f-79cc-45b8-be8e-9b3ea8b220e3?scope=resourceAquire";
let data = [];
let list = document.querySelector(".list");

fetch(dataUrl)
  .then((response) => {
    return response.json();
  })
  .then((dataList) => {
    data = dataList.result.results;
    console.log(data);
    render();
  });

function render() {
  let str = "";
  data.forEach((item) => {
    str += `
        <li>名稱：${item.機構名稱}</li>
      `;
  });
  list.innerHTML = str;
}

codepen https://codepen.io/hnzxewqw/pen/dyGEmbz

提姆寫程式