JavaScript异步编程之Promise的初步使用详解

1. 概述

Promise对象是ES6提出的的异步编程的规范。说到异步编程，就不得不说说同步和异步这两个概念。

从字面意思理解同步编程的话，似乎指的是两个任务同步运行，如果这样理解就错了（至少笔者再没有接触到这个概念的时候有这种误解）。同步和异步指的是代码指定执行的顺序（结构化编程范式的执行顺序总是由上至下，由前往后的），如果执行的顺序与代码的相同，就是同步；如果不同，就是异步。

最初，操作系统都是基于命令行的，所有的的语言设计出来也天然是同步的语句，在这种情况下，也不需要异步编程。但是很快，图形操作界面就出来了，所有的程序设计语言都不得不跟GUI打交道了。我们必须了解的是，GUI程序是一个不停绘制的界面程序：

while(done)
{
    dosomething();
    drawGUI();
}

如果每个循环中执行的任务dosomething()的事件太长，就会导致界面迟迟得不到绘制命令，直观的表现就是卡顿。为了解决这个问题，使用JavaScript作为脚本的浏览器一般都会采用事件循环(Event Loop)的机制:

  • 将耗时的行为规定为事件，事件与响应回调函数绑定。
  • 每个循环，优先处理同步代码。
  • 同步代码完成，按照先后顺序遍历事件。
  • 在剩下的没有同步代码的循环中，依次执行事件的相应函数。

这样，在单线程的情况下，就修改了任务的执行顺序，实现了异步的机制。因为同步的行为总是很快完成及时进行了界面绘制，界面卡顿的现象也大为改善了。

事件循环机制将UI设备的输入输出规定为事件，实际上，耗时的行为非常多，但是一般都与IO相关，与IO相关的行为，JavaScript都提供了异步行为的代码。例如，这里要用的一个加载图片的实例。

2. 详论

首先准备一个HTML页面PromiseTest.html，在这个HTML页面中加载JS的脚本PromiseTest.js：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="./3rdParty/jquery-3.5.1.js"></script>
    <title>样例</title>
</head>

<body>
    <div id = "container"> </div>
    <script src="./PromiseTest.js"></script>
</body>

</html>

原生的JS的图像对象Image，是通过事件的形式来实现图像的异步加载的：

$(function () {
    var img = new Image();
    img.onload = function () {
        $(img).appendTo($('#container'));
    };
    img.src = "./img.jpg";
});

为Image的事件句柄onload，添加一个相应函数，当图像装载完成之后，就将装载好的Image添加到HTML页面的某个div元素子节点下。通过浏览器打开这个页面，会直接显示对应地址的图片。

这个JS脚本当然也可以通过Promise来改写：

$(function () {
    function getImg(uri){
        return new Promise(function(resolve, reject){
            var img = new Image();
            img.onload = function () {
                resolve(img);
            };
            img.onerror = function () {
                reject(Error("Load Image Error!"));
            }
            img.src = uri;
        });
    }  

    var imgUri = "./img.jpg";
    getImg(imgUri).then(function(img){
        $(img).appendTo($('#container'));
    }, function(error){
        console.error("Failed!", error);
    })
});

粗看起来，使用Promise，似乎使得程序显得更加复杂和繁复了。但是我们要深入理解Promise机制的内涵，这样设计并不是为了好玩。

  • Promise对象代表的是一个预定要做、但是还未开始做的行为。既然是一个行为，当然得进行计划，并对行为结果做出规定：如果成功了，就执行resolve；如果失败了，就执行reject。一般我们可以定义一个function，并且返回一个Promise对象。
  • 调用返回Promise对象的function，这样这个想要进行的行为就真正启动了。不过resolve和reject只是两个回调函数，那么就通过then方法来规定成功和失败对应的真正的处理函数。

可以看到，这样的设计看起来很繁复，但是却很像是一个同步行为：规定一个未完成行为对象，行为完成了如何处理，行为失败了又如何处理。而这也是Promise的目的：使得异步操作更像是一个同步的行为。

3. 参考

同步(Synchronous)和异步(Asynchronous)

简述JS单线程异步实现原理

JavaScript 运行机制详解：再谈Event Loop

到此这篇关于JavaScript异步编程之Promise的初步使用的文章就介绍到这了,更多相关js Promise使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript中Promise的使用详解

    Promise是ES6中的函数,规范了如何处理异步任务的回调函数,功能类似于jQuery的defferred.简单说就是通过promise对象的不同状态调用不同的回调函数.目前IE8及以下不支持,其他浏览器都支持. promise对象的状态,从Pending转换为Resolved或Rejected之后,这个promise对象的状态就不会再发生任何变化. 使用步骤: var promise = new Promise(function(resolve, reject) { // 异步任务,通过调用

  • 异步JavaScript编程中的Promise使用方法

    异步? 我在很多地方都看到过异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做"已经很清楚"(*￣?￣). 如果你也有类似的情况,没关系,搜索一下这个词,就可以得到大致的说明.在这里,我会对JavaScript的异步做一点额外解释. 看一下这段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Time elap

  • 举例详解JavaScript中Promise的使用

    摘录 – Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了. "Promises" 代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简单的事.它的核心就是一个promise代表一个任务结果,这个任务有可能完成有可能没完成.Promise模式唯一需要的一个接口是调用then方法,它可以用来注册当promise完成或者失败时调用的回调函数,这在Common

  • JS 中使用Promise 实现红绿灯实例代码(demo)

    要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下: <ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul> 定义一个

  • node.js中使用q.js实现api的promise化

    关于啥是promise以及promise解决的是啥问题,敬请体验node的回调异步编码大法,顺带移步http://wiki.commonjs.org/wiki/Promises/A 看看是咋定义的,在此不再赘述. 这里我们看看怎么用q.js 实现node api的promise. 一.万事开始皆为install 复制代码 代码如下: npm install q 二.标准node style api 的promise化方法 1.使用Q.nfcall 相对于Q.fcall ,Q.nfcall 就是n

  • 详细解读JavaScript编程中的Promise使用

    Promise核心说明 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同.但Promise的核心内容,是相通的,它就是then方法.在相关术语中,promise指的就是一个有then方法,且该方法能触发特定行为的对象或函数. Promise可以有不同的实现方式,因此Promise核心说明并不会讨论任何具体的实现代码. 先阅读Promise核心说明的意思是:看,这就是需要写出来的结果,请参照这个结果想一想怎么用

  • javascript异步编程的六种方式总结

    javascript异步编程的六种方式总结

    异步编程 众所周知 JavaScript 是单线程工作,也就是只有一个脚本执行完成后才能执行下一个脚本,两个脚本不能同时执行,如果某个脚本耗时很长,后面的脚本都必须排队等着,会拖延整个程序的执行.那么如何让程序像人类一样可以多线程工作呢?以下为几种异步编程方式的总结,希望与君共勉. 回调函数 事件监听 发布订阅模式 Promise Generator (ES6) async (ES7) 异步编程传统的解决方案:回调函数和事件监听 初始示例:假设有两个函数, f1 和 f2,f1 是一个需要一定时

  • JavaScript异步编程之Promise的初步使用详解

    1. 概述 Promise对象是ES6提出的的异步编程的规范.说到异步编程,就不得不说说同步和异步这两个概念. 从字面意思理解同步编程的话,似乎指的是两个任务同步运行,如果这样理解就错了(至少笔者再没有接触到这个概念的时候有这种误解).同步和异步指的是代码指定执行的顺序(结构化编程范式的执行顺序总是由上至下,由前往后的),如果执行的顺序与代码的相同,就是同步:如果不同,就是异步. 最初,操作系统都是基于命令行的,所有的的语言设计出来也天然是同步的语句,在这种情况下,也不需要异步编程.但是很快,图

  • Javascript异步流程控制之串行执行详解

    这篇文章主要讲一下如何串行执行一组异步任务,例如有下面几个任务,在这里我们用setTimeout模拟一个异步任务: let taskA = () => setTimeout(() => console.log('run task A'), 100); let taskB = () => setTimeout(() => console.log('run task B'), 50); let taskC = () => setTimeout(() => console.l

  • Java并发编程之Semaphore（信号量）详解及实例

    Java并发编程之Semaphore（信号量）详解及实例

    Java并发编程之Semaphore(信号量)详解及实例 概述 通常情况下,可能有多个线程同时访问数目很少的资源,如客户端建立了若干个线程同时访问同一数据库,这势必会造成服务端资源被耗尽的地步,那么怎样能够有效的来控制不可预知的接入量呢?及在同一时刻只能获得指定数目的数据库连接,在JDK1.5 java.util.concurrent 包中引入了Semaphore(信号量),信号量是在简单上锁的基础上实现的,相当于能令线程安全执行,并初始化为可用资源个数的计数器,通常用于限制可以访问某些资源(物

  • go语言编程之select信道处理示例详解

    目录 select信道处理 fibonacci数列监听 select监听协程 select信道处理 注意:有default就不会阻塞 package main func main() { var chan1 = make(chan int) var chan2 = make(chan int) select { case <-chan1: // 如果chan1成功读到数据,则进行该case处理语句 case chan2: // 如果chan2成功读到数据,则进行该case处理语句 default

  • socket编程之bind()函数使用示例详解

    目录 正文 端口号具体是怎么绑定 老代码 端口被占用的问题解决 正文 当你创建了socket之后,你会想要把这个socket和你本机上的某个端口号(port)进行关联. 端口号是内核用来确认将收到的数据包交给哪个具体进程的socket descriptor的依据. 通常在写服务端程序的时候我们才需要进行关联,客户端程序不需要我们手动绑定端口,直接connect()就好了. 端口号具体是怎么绑定 #include <sys/types.h> #include <sys/socket.h&g

  • android编程之XML文件解析方法详解(附源码)

    android编程之XML文件解析方法详解(附源码)

    本文实例讲述了android编程之XML文件解析方法.分享给大家供大家参考,具体如下: 在android开发中,经常用到去解析xml文件,常见的解析xml的方式有一下三种:SAX.Pull.Dom解析方式.最近做了一个android版的CSDN阅读器,用到了其中的两种(sax,pull),今天对android解析xml的这三种方式进行一次总结. 今天解析的xml示例(channels.xml)如下: <?xml version="1.0" encoding="utf-8

  • Python编程之string相关操作实例详解

    Python编程之string相关操作实例详解

    本文实例讲述了Python编程之string相关操作.分享给大家供大家参考,具体如下: #coding=utf8 ''''' 字符串是Python中最常见的类型.可以通过引号见包含字符的方式创建. Python里面单引号和双引号的作用是相同的. 字符串是不可变类型,就是说改变一个字符串的元素需要新建一个新的字符串. 字符串是由独立的字符组成,并且这些字符可以通过切片操作顺序地访问. ''' class StringClass(object): ''''' 创建一个字符串就像使用一个标量一样简单.

  • Java Swing组件编程之JTable表格用法实例详解

    Java Swing组件编程之JTable表格用法实例详解

    本文实例讲述了Java Swing组件编程之JTable表格用法.分享给大家供大家参考,具体如下: 表格是GUI编程中使用较多,但也是最麻烦的一个控件之一.表格是用来显示二维数据,提供编辑,选择等功能.如果只是显示数据,这还是非常easy的,只要在JTable中传入二维数组或集合就可以了. 示例1: package awtDemo; import javax.swing.JFrame; import javax.swing.JScrollPane; import javax.swing.JTab

  • Python中线程编程之threading模块的使用详解

    threading.Thread Thread 是threading模块中最重要的类之一,可以使用它来创建线程.有两种方式来创建线程:一种是通过继承Thread类,重写它的run方法:另一种是创建一个threading.Thread对象,在它的初始化函数(__init__)中将可调用对象作为参数传入.下面分别举例说明.先来看看通过继承threading.Thread类来创建线程的例子: #coding=gbk import threading, time, random count = 0 cl

  • Go并发编程之sync.Once使用实例详解

    目录 一.序 二. 源码分析 2.1结构体 2.2 接口 三. 使用场景案例 3.1 单例模式 3.2 加载配置文件示例 四.总结 五. 参考 一.序 单从库名大概就能猜出其作用.sync.Once使用起来很简单, 下面是一个简单的使用案例 package main import ( "fmt" "sync" ) func main() { var ( once sync.Once wg sync.WaitGroup ) for i := 0; i < 10;

随机推荐