今天逛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。