介紹

fetch，是ajax之外取得外部資料的一種方式
使用promise物件架構

補充：ajax

範例

取得圖片

img#img

const moko="https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/15355572_1410266889006372_4764767806658769471_n.jpg?oh=39e4da3e9a9956f349b6c701556544ff&oe=593B04D9"


fetch(moko)
 .then(blob => blob.blob())
 .then(myb => img.src=URL.createObjectURL(myb))

//fetch發送請求
//使用blob獲得圖片的內容
//再從blob獲得URL，放到img的src之中

Display

取得JSON資料（有function的情況下）

button#btn click me
ul#ul

const endpoints="https://awiclass.monoame.com/api/command.php?type=get&name=tododata";

const tododata=[];

fetch(endpoints)
 .then(blob => blob.json())
 .then(data => tododata.push(...data))//要用spread把nodeList轉成array

function show (){
 ul.innerHTML=tododata.map(place => `<li>${place.name}</li>`).join("");//join("")把陣列轉換成字串，並且將分隔取代為無
}

btn.addEventListener("click", show)

Display

CODEPEN

取得JSON資料（無function的情況下）

沒有function的情況下，JS無法用內接陣列的方式，讀取外部URL的JSON。
因此，方法改寫如下，

ul#ul

const endpoints="https://awiclass.monoame.com/api/command.php?type=get&name=tododata";

// const tododata=[];

fetch(endpoints)
 .then(blob => blob.json())
 .then(data => {
 ul.innerHTML=data.map(place => `<li>${place.name}</li>`).join("");
})

Display

CODPEN