web API简介(一):API,Ajax和Fetch

时间:2023-08-12 20:41:56

概述

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