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

偏执的太偏执、 2022-10-15 00:43 187阅读 0赞

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

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

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

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

将耗时的行为规定为事件，事件与响应回调函数绑定。  
每个循环，优先处理同步代码。  
同步代码完成，按照先后顺序遍历事件。  
在剩下的没有同步代码的循环中，依次执行事件的相应函数。  
这样，在单线程的情况下，就修改了任务的执行顺序，实现了异步的机制。因为同步的行为总是很快完成及时进行了界面绘制，界面卡顿的现象也大为改善了。

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

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

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
<!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>