iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
1
Modern Web

從零開始認識 Node.js系列 第 24

[Day 24] 動手篇 - 停!XMLHttpRequest or Fetch API

Stop

前言

今天時間不夠,因此 Line Bot 的 Webhooks 實作延後,今天來說點熟悉又不熟悉的內容

本文開始

[來源] XMLHttpRequest

Web 提到 AJAX 相信沒有人會說不知道,提到 XMLHttpRequest 還有多少人知道呢?

被 jQuery 養壞的我 ( 們? ) 以為 AJAX 長這樣 ( Example Code )

var jqxhr = $.ajax({
    url: "test.html",
    context: document.body
  })
  .done(function() {
    alert( "success" );
  });

實際上長這樣 ( Example Code )

function reqListener () {
  console.log(this.responseText);
};

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();

是不是差很多呢?

對於資料傳遞使用 AJAX 非常習慣的我們,曾想過 XMLHttpRequest 一直都不是 W3C 的標準呢?期初 XMLHttpRequest 是 Microsoft 設計, Mozilla 、 Apple 、 Google 相繼採用而成為資料的主流,直至今年 10 月 6日 W3C 才正式發佈成為標準 ( 文件 Link ) 。

Fetch API

Web Hypertext Application Technology Working Group ( 簡稱 WHATWG ) 主導,做用和 AJAX 極為相似,多了 Promise 。

WHATWG:

  • 2004 年由 Apple 、 Mozilla 、 Opera 三間公司組成
  • 2004 年 W3C 希望以 XHTML ( XML ) 取代 HTML
  • 和 W3C 共同制定 HTML 5 標準 ( 這段有興趣可以 Google 一下 )

現在網上愈來愈多 Fetch API 的文章,有興趣者可以上網找找,這裡我借用 Matt Gaunt 的 Example Code ,建議有興趣可以看看 Matt Gaunt - Introduction to fetch() 寫的,這篇有收進 Google Developers 中。

XMLHttpRequest

function reqListener() {
  var data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError(err) {
  console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Fetch API

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +  
          response.status);
        return;
      }

      // Examine the text in the response  
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

看起來差不多長,若加上 ES7 的 async / await

async () => {
  let result
  try {
    result = await fetch('./api/some.json');
    if (result.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +  
        result.status);  
      return;  
    }
  } catch (err) {
    console.log('Fetch Error :-S', err);
  }
}

是不是簡潔許多!

後記

Fetch API 目前是 WHATWG 主導,因此 W3C 還找不到相關的文件 ( 標準制定的內容 看這裡 ) ;而主流的 Browser 多數已支援 ( 看這裡 ) 。

這和 Webhooks 有什麼關係呢? Webhooks 仍會需要送 Request ,而今天藉此機會翻了一下 requestjs 的 Source Code ,發現是透過 Node.js 本身的機制,最近忙完來翻翻 Source code 學習。


上一篇
[Day 23] 動手篇 - 等等!什麼是 Webhooks?
下一篇
[Day 25] 動手篇 - I have a Line Bot,I have a Koa Webhooks (1)
系列文
從零開始認識 Node.js31

尚未有邦友留言

立即登入留言