Node基础 Promise

发表于 | 阅读次数:

Promise 对象用于异步计算. 一个Promise对象代表一个值, 该值可以在当前或未来可用, 或永远不可用。
Promise对象有以下几种状态:

  1. pending: 初始状态, 既不是 fulfilled 也不是 rejected.
  2. fulfilled: 成功的操作.
  3. rejected: 失败的操作.

以上描述均来自于MDN对Promise基础的解释，链接地址。
在看MDN对Promise的例子中同时学到了insertAdjacentHTML()这一接口，这个接口对于在元素之间DOM的插入非常的方便，但这里只是简单的介绍下，insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将生成的节点插入到指定位置的DOM树中。语法使用：
element.insertAdjacentHTML(position, text);
其中参数position是指相对于元素的位置，存在四个对应的字母串，分别是beforebegin[element自身的前面]，afterbegin[插入element内部的第一个子节点之前]，beforeend[插入element内部的第一个子节点之后]，afterend[element自身的后面]；MDN上对该API的解释地址是：点击跳转。
在看了上述文档以及例子之后，自己也随手写了一个比较简单的例子：

1
2
3
4
5
6
<div id="promise1">
 <p id="test1">Promise1<b>[id: test1]</b></p>
 <p id="test2">Promise2<b>[id: test2]</b></p>
 <p id="test3">Promise3<b>[id: test3]</b></p>
 <p id="test4">Promise4<b>[id: test4]</b></p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
 function promise2() {
 console.log('同步代码开始');
 var promise1 = document.getElementById('promise1');

 var test1 = document.getElementById('test1');
 var test2 = document.getElementById('test2');
 var test3 = document.getElementById('test3');
 var test4 = document.getElementById('test4');

 test1.insertAdjacentHTML('beforebegin' , "<p id='insert1'>这个元素放在id为'test1'\之前<b>[id: insert1]</b></p>");
 promise1.insertAdjacentHTML('afterbegin', "<p id='insert2'>这个元素放在id为'inseret1'\
之前<b>[id: insert2]</b></p>");
 promise1.insertAdjacentHTML('beforeend', "<p id='insert3'>这个元素放在id为'test4'\ 之后<b>[id: insert3]</b></p>");
 test1.insertAdjacentHTML('afterend' , "<p id='insert4'>这个元素放在id为'test1'\之后<b>[id: insert4]</b></p>")
 var p2 = new Promise((resolve, reject) => {
   var val = true;
   console.log('异步代码开始');
   window.setTimeout(() => {
     resolve(val);
   }, 3000);
 }).then((value) => {
 test3.insertAdjacentHTML('beforebegin', "<p id='insert5'>异步代码执行结果：这个元素放在id为'test3'\之前<b>[id: insert5]</b></p>");
 console.log('异步代码结束');
 }).catch(console.log.bind(console));
 test4.insertAdjacentHTML('beforebegin', "<p id='insert6'>这个元素放在id为'test4'之前\
 <b>[id: insert6]</b></p>");
 console.log('同步代码结束');
 }
</script>