• 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。

  • 相关阅读:
    redis增加移除节点
    MYSQL管理工具phpMyAdmin安装,nginx动态页面转php-fpm端口
    配置PHP支持MYSQL
    后台运行linux命令,杀死僵尸进程
    linux教程,shell教程,nginx,mysql安装教程
    KMS服务器的搭建
    docker基本操作,Dockerfile , 自定义仓库
    IntelliJ IDEA中Java的Getter/Setter方法的自动生成
    Java定义一个标准的类
    Java构造方法
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/8433848.html
Copyright © 2020-2023  润新知