前言

今天時間不夠，因此 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 學習。