1. 概述

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

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

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

while(done)

{

    dosomething();

    drawGUI();

}

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

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

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

事件循环机制将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机制的内涵，这样设计并不是为了好玩。

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

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

3. 参考

  1. 同步(Synchronous)和异步(Asynchronous)
  2. 简述JS单线程异步实现原理
  3. JavaScript 运行机制详解：再谈Event Loop

JavaScript异步编程1——Promise的初步使用的更多相关文章

  1. javascript异步编程，promise概念

    javascript 异步编程 概述 采用单线程模式工作的原因: 避免多线dom操作同步问题,javascript的执行环境中负责执行代码的线程只有一个 内容概要 同步模式和异步模式 事件循环和消息队 ...

  2. Javascript异步编程之三Promise: 像堆积木一样组织你的异步流程

    这篇有点长,不过干货挺多,既分析promise的原理,也包含一些最佳实践,亮点在最后:) 还记得上一节讲回调函数的时候,第一件事就提到了异步函数不能用return返回值,其原因就是在return语句执 ...

  3. JavaScript异步编程的Promise模式(转)

    异步模式在web编程中变得越来越重要,对于web主流语言Javascript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promis ...

  4. JavaScript异步编程的Promise模式

    参考: http://www.infoq.com/cn/news/2011/09/js-promise http://www.cnblogs.com/rubylouvre/p/3495286.html ...

  5. JavaScript异步编程的主要解决方案—对不起，我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  6. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  7. javascript异步编程的前世今生，从onclick到await/async

    javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...

  8. JavaScript异步编程（2）- 先驱者：jsDeferred

    JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...

  9. Promises与Javascript异步编程

    Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...

  10. 5分种让你了解javascript异步编程的前世今生，从onclick到await/async

      javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...

随机推荐

  1. [ABC308G] Minimum Xor Pair Query 题解

    Minimum Xor Pair Query 题目大意 维护一个序列,支持动态插入,删除,查询最小异或对. 思路分析 看到查询最小异或对首先想到 01Trie,但 01Trie 不支持删除,考虑暴力套 ...

  2. Leetcode.402单调栈

    给你一个以字符串表示的非负整数 num 和一个整数 k ,移除这个数中的 k 位数字,使得剩下的数字最小.请你以字符串形式返回这个最小的数字. 示例 1 : 输入:num = "143221 ...

  3. 使用 redis 实现分布式接口限流注解 RedisLimit

    前言 很多时候,由于种种不可描述的原因,我们需要针对单个接口实现接口限流,防止访问次数过于频繁.这里就用 redis+aop 实现一个限流接口注解 @RedisLimit 代码 点击查看RedisLi ...

  4. 比较并交换(compare and swap, CAS)

    比较并交换(compare and swap, CAS),是原子操作的一种,可用于在多线程编程中实现不被打断的数据交换操作,从而避免多线程同时改写某一数据时由于执行顺序不确定性以及中断的不可预知性产生 ...

  5. Python 之 Numpy 框架入门

    NumPy 目录 NumPy 基础使用 基本数据类型 创建基本数组 数组属性 数组生成 zeros.ones.empty 数组生成 numpy.zeros numpy.ones numpy.empty ...

  6. 【Javaweb】implements Serializable是什么意思？反序列化是什么意思？

    为了保证数据传输的可靠 性,常常要implements Serializable,为什么? 对象本质上是虚无缥缈的,只是内存中的一个地址,如果想要让对象持久化,让对象在网络上传输,总不可能传送一个内存 ...

  7. VLOOKUP函数10种经典用法

    VLOOKUP函数是Excel中非常常用的函数之一,可以用于在一个区域或表格中查找某个值,并返回该值所在行的另一个指定列中的数值.以下是VLOOKUP函数的10种经典用法: 基本的VLOOKUP用法: ...

  8. SpringBoot启动@Test单元测试时,一致卡在加载junit-bom-5.6.3.pom.xml文件

    今天做项目时创建一个SpringBoot工程,使用的版本是<spring-boot.version>2.3.7.RELEASE</spring-boot.version> 当我 ...

  9. 文心一言 VS 讯飞星火 VS chatgpt （160）-- 算法导论12.4 2题

    二.用go语言,请描述这样一棵有 n 个结点的二叉搜索树,其树中结点的平均深度为 O(lgn),但这棵树的高度是w(lgn).一棵有 n个结点的二叉搜索树中结点的平均深度为 O(lgn),给出这棵树高 ...

  10. npm 发布流程

    登录npm 查看本地是否登录 # 全局配置源 npm who am i # 官方源 npm who am i --registry https://registry.npmjs.org 注: npm源 ...