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。