JavaScript异步编程1——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. 参考
JavaScript异步编程1——Promise的初步使用的更多相关文章
- javascript异步编程，promise概念
javascript 异步编程 概述 采用单线程模式工作的原因: 避免多线dom操作同步问题,javascript的执行环境中负责执行代码的线程只有一个 内容概要 同步模式和异步模式 事件循环和消息队 ...
- Javascript异步编程之三Promise: 像堆积木一样组织你的异步流程
这篇有点长,不过干货挺多,既分析promise的原理,也包含一些最佳实践,亮点在最后:) 还记得上一节讲回调函数的时候,第一件事就提到了异步函数不能用return返回值,其原因就是在return语句执 ...
- JavaScript异步编程的Promise模式(转)
异步模式在web编程中变得越来越重要,对于web主流语言Javascript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promis ...
- JavaScript异步编程的Promise模式
参考: http://www.infoq.com/cn/news/2011/09/js-promise http://www.cnblogs.com/rubylouvre/p/3495286.html ...
- JavaScript异步编程的主要解决方案—对不起，我和你不在同一个频率上
众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- javascript异步编程的前世今生，从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...
- JavaScript异步编程（2）- 先驱者：jsDeferred
JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...
- Promises与Javascript异步编程
Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...
- 5分种让你了解javascript异步编程的前世今生，从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...
随机推荐
- liunx知识点--umask
介绍 umask(user's mask)用来设置文件权限掩码.权限掩码是由3个八进制的数字所组成,将现有的存取权限减掉权限掩码后,即可产生建立文件时预设的权限. UNIX最初实现时不包含umask命 ...
- P8684 [蓝桥杯 2019 省 B] 灵能传输 题解
P8684 [蓝桥杯 2019 省 B] 灵能传输 题解 Part 1 提示 题目传送门 欢迎大家指出错误并私信这个蒟蒻 欢迎大家在下方评论区写出自己的疑问(记得 @ 这个蒟蒻) Part 2 更新日 ...
- Java编程之道：巧妙解决Excel公式迭代计算难题
本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是迭代计算 迭代计算其实是在 Excel 中,一种公式的循环引用,对于了 ...
- 揭秘计算机指令执行的神秘过程：CPU内部的绝密操作
计算机指令 从软件工程师的角度来看,CPU是执行计算机指令的逻辑机器.计算机指令可以看作是CPU能够理解的语言,也称为机器语言. 不同的CPU能理解的语言不同.例如,个人电脑使用Intel的CPU,苹 ...
- RLChina2022公开课-博弈论
纯博弈: 单纯的动机组合,离散的集合 混合博弈: 加入了概率论,以百分比的概率执行不同的的动机.,概率分布 零和博弈.合作博弈.协同博弈 扩展博弈和非完美信息 扩展博弈.贝叶斯博弈 纳什均衡 任何一位 ...
- c#中单例模式详解
基础介绍: 确保一个类只有一个实例,并提供一个全局访问点. 适用于需要频繁实例化然后销毁的对象,创建对象消耗资源过多,但又经常用到的对象,频繁访问数据库或文件的对象. 其本质就是保证在整个 ...
- JavaScript 语法：变量、数据类型及数据类型转换
作者:WangMin 格言:努力做好自己喜欢的每一件事 变量 赋值变量用 var 关键字,情况如下: 1)先声明变量再赋值 var varName; varName="你好~"; ...
- 【pwn】ciscn_2019_s_3 -- rop，gadget利用，泄露栈地址
这道题挺好的,可以帮助我更好的理解gadget的利用以及rop技术 首先,查一下程序保护情况 拖进ida分析 这里sys_read和sys_write是系统调用函数,看汇编可以分析出来 我们首先要了解 ...
- linux系统centos7安装docker
1.Docker官网安装地址 https://docs.docker.com/engine/install/centos/#prerequisites 2.离线安装下载地址 https://downl ...
- Python 如何实现合并 PDF 文件？
在处理多个 PDF 文档时,频繁地打开关闭文件会严重影响效率.因此,对于一大堆内容相关的 PDF 文件,我们可以先将这些 PDF 文件合并起来再操作,从而提高工作效率.比如,在传送大量的 PDF 文档 ...