JavaScript Day20 - AJAX(2)

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