ES6：fetch

• fetch()：Fetch API 提供了一個能獲取包含跨網路資源在的資源介面，功能類似前一天的 XMLHttpRequest ，但更容易使用，是我目前比較常用的 AJAX 方法
  • fetch()：放 request，基本上就是 url，其他的若需要如 post 則用 {} 將 method、body、headers 之類的放入
  • then(response)：response 的結果，如果是 JSON 一般會用 .json() 解析，其他還有文字 .text()
  • then()：取得解析後的資料要做的事情，例如改變你的網頁內容
  • catch(err)：錯誤時的狀況

語法與 JSON 例子

fetch('http://example.com/', {method: 'get'})
  .then(function(response) {
    //處理 response
  }).catch(function(err) {
    // Error
});

// JSON
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  }).catch(function(err) {
    console.log(err);
});

POST 方法

// post
const url = '';  // API url
const data = {
  "name": name.value,
  "password": password.value
}; // JSON data

fetch(url,{
  method:'POST',
  body:JSON.stringify(data),
  headers: {'Content-Type': 'application/json'}
  }).then() // function 

參考資料

MDN Fetch API
MDN Using Fetch
AJAX與Fetch API
鐵人賽：ES6 原生 Fetch 遠端資料方法
JacaScript | Fetch 讓 ES6 擁有一對翅膀-基礎教學
JavaScript Fetch API 使用教學

次回

還是會再說明 AJAX