Fetch API 介紹

• 以 Promise 結構為基礎（具有異步執行流程結構）
• 不是外部函式庫，是使用瀏覽器功能，較穩定
• 用來執行送出 Request，若得到成功回應會回傳一個帶有Response物件

Fetch 基本用法

fetch('url', {method: 'get'})
.then((response) => {
	console.log(response);
	return response.json();   //回傳的為 ReadableStream 物件，所以用json()轉換格式
}).catch((err) => {
	console.log('錯誤:', err);
})

參數

• method(GET, POST, PUT, DELETE, HEAD)
• url
• headers
• referrer(no-referrer, client, 一個網址)
• mode(cors, no-cors, same-origin, navigate)
• credentials(omit, same-origin, include)
• redirect(follow, error, manual)
• integrity
• cache(default, no-store, reload, no-cache, force-cache)
• body（不能在method是GET和HEAD時使用）

範例說明

let url = 'https://hexschool-tutorial.herokuapp.com/api/signup';
fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({email: 'lovef1232e@hexschool.com',password: '12345678'})
}).then((response) => {
    return response.json(); 
  }).then((jsonData) => {
    console.log(jsonData);
  }).catch((err) => {
    console.log('錯誤:', err);
})