0%

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

ES6

本篇使用此 API 做為範例

fetch 起手式

有點像 jQuery 跟 axios,

1
2
3
4
5
6
7
fetch("網址")
.then(function (response) {
// 處理 response
})
.catch(function (err) {
// 錯誤處理
});

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

1
2
3
4
5
6
7
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

參考資料