web API簡介(一)：API，Ajax和Fetch

概述

今天逛MDN，無心中看到了web API簡介，以爲挺有意思的，就認真讀了一下。

下面是我在讀的時候對感興趣的東西的總結，供本身開發時參考，相信對其餘人也有用。

什麼是API

API (Application Programming Interface)就是一些規則，它使軟件與其它東西更好的交互。

原文以下：

An API (Application Programming Interface) is a set of features and rules that exist inside a software program enabling interaction between the software and other items, such as other software or hardware.

常見瀏覽器API

• 操做文檔的API
• 從服務器獲取數據的API
• 用於繪製和操做圖形的API
• 音頻和視頻API
• 設備API
• 客戶端存儲API

注意：瀏覽器中封裝了不少API，有幾百個吧，具體能夠看這裏：MDN API index page。

API的常見操做

• API一般有幾個可用的options，用來調整以得到程序所需的確切環境

• API一般僅在操做完成時調用函數

在使用API時，咱們每每不能當即得到返回的數據，所以必須在確保一個操做完成以後再進行另外一個操做。咱們經過回調函數實現這種操做，或者更爲現代的，用Promise實現。

• API一般有可識別的入口

這些入口通常是API對象的實例。好比DOM API的入口是document，Canvas API的入口是canvas。

var em = document.createElement('em'); 

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

• API一般使用事件來處理狀態的變化

好比：XMLHttpRequest API的onload事件在成功返回時就觸發包含請求的資源。

• API一般在適當的地方有額外的安全機制

爲了用戶的安全，不少API通常都會請求權限。

XMLHttpRequest API

也就是咱們俗稱的Ajax。

一個簡單的例子以下：

//正如前面所說，咱們得到API的入口：建立一個XHR請求。
var request = new XMLHttpRequest();

//咱們使用open()方法來指定用於從網絡請求資源的get方法, 以及它的URL。
request.open('GET', url);

//咱們設置咱們期待的響應類型—這是由請求的responseType屬性定義的—做爲text。
//這並非絕對必要的 — XHR默認返回文本。
request.responseType = 'text';

//正如前面所說，咱們咱們用一個事件onload來判斷是否得到了返回的數據。
//若是返回則執行回調函數。
request.onload = function() {
  poemDisplay.textContent = request.response;
};

//以上都是XHR請求的設置 — 在咱們告訴它以前，它不會真正運行。
//咱們用send()來運行它們。
request.send();

Fetch API

Fetch API基本上是XHR的一個現代替代品——它是最近在瀏覽器中引入的，它使異步HTTP請求在JavaScript中更容易實現，對於開發人員和在Fetch之上構建的其餘API來講都是如此。

咱們把上面的XHR代碼改成Fetch代碼：

fetch(url).then(function(response) {
  response.text().then(function(text) {
    poemDisplay.textContent = text;
  });
});

首先，咱們調用了fetch()方法，將咱們要獲取的資源的URL傳遞給它。這至關於現代版的XHR中的request.open()，另外，咱們不須要任何等效的send()方法。

而後，能夠看到.then()方法鏈接到了fetch()末尾-這個方法是Promises的一部分，是一個用於執行異步操做的現代JavaScript特性。fetch()返回一個promise，它將解析從服務器發回的響應。咱們使用then()來運行一些後續代碼，這是咱們在其內部定義的函數。這至關於XHR版本中的onload事件處理程序。

而後，在函數內部，咱們獲取響應並運行其text()方法。這基本上將響應做爲原始文本返回，這至關於在XHR版本中的responseType = 'text'。

最後，咱們執行回調函數。把text賦值給textContent。

注意：大多數現代的JavaScript api都是基於Promises的。

注意：Fetch確實比XHR更穩定強力，可是不少瀏覽器不支持。可是隨着IE瀏覽器的使用量減小(微軟在逐漸開發使用Edge瀏覽器取代IE)，Fetch的使用會愈來愈流行，可是在這以前，咱們必須用一段時間的XHR。