JavaScript - Promise 对象 - 学习/实践

刺骨的言语ヽ痛彻心扉 2023-02-15 10:29 204阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> Promise 解决的是异步编码风格的问题，而不是一些其他的问题，所以接下来我们聊的话题都是围绕编码风格展开的。 主要用于网络请求[异步编码风格], 还有一些其他异步任务等. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档 <a href="https://wangdoc.com/javascript/async/promise.html" rel="nofollow">https://wangdoc.com/javascript/async/promise.html</a>&nbsp; //Promise 对象 <a href="https://time.geekbang.org/column/article/136895" rel="nofollow">https://time.geekbang.org/column/article/136895</a>&nbsp; //极客时间 -&nbsp;&nbsp;浏览器工作原理与实践 -&nbsp;19 | Promise：使用Promise，告别回调函数&nbsp; ---- 推荐 <a href="https://es6.ruanyifeng.com/#docs/promise" rel="nofollow">https://es6.ruanyifeng.com/#docs/promise</a>&nbsp; &nbsp;//ECMAScript 6 入门&nbsp; - promise&nbsp; <a href="https://www.yuque.com/ostwind/es6/docs-promise" rel="nofollow">https://www.yuque.com/ostwind/es6/docs-promise</a>&nbsp; &nbsp; 视频 <a href="https://www.bilibili.com/video/BV1Np4y1k77K?t=10503" rel="nofollow">https://www.bilibili.com/video/BV1Np4y1k77K?t=10503</a>&nbsp; // 详解Promise <a href="https://www.bilibili.com/video/BV1ch411k7Ud" rel="nofollow">https://www.bilibili.com/video/BV1ch411k7Ud</a>&nbsp; //&nbsp;【全网首发:已完结】你真的知道『Promise的存在意义吗？』【基础知识必备】 -- 推荐 &nbsp; &nbsp; Note： 看过上面的文档， 发现关于promise出现的原因/解决问题， 也没有完全达成一致的意见～～ 不过，promise是为了解决异步编程风格的问题， 这是没有争议的～～ &nbsp; 2.整理输出 
 <table> 
 <tbody> 
 <tr> 
 <td> 2.1 Promise出现的根本原因【Promise是什么】 异步问题同步化解决方案 不是为了解决所谓的回调地狱，不过也确实顺道解决了下， 但是依然不优雅 链式操作也不是很优雅，真正解决回调地狱的问题的方案：是使用async/await + promise &nbsp; 相关学习实践code：&nbsp; <a href="https://gitee.com/william_ning/front-end-learning/tree/master/promise/demo-project" rel="nofollow">https://gitee.com/william_ning/front-end-learning/tree/master/promise/demo-project</a>&nbsp; &nbsp; 其中使用vite前端开发工具 文档参考：&nbsp; <a href="https://github.com/vitejs/vite" rel="nofollow">https://github.com/vitejs/vite</a>&nbsp; // source code <a href="https://zhuanlan.zhihu.com/p/149033579" rel="nofollow">https://zhuanlan.zhihu.com/p/149033579</a>&nbsp;// 看到了<a href="https://www.zhihu.com/people/cfdec6226ece879d2571fbc274372e9f" rel="nofollow">尤雨溪</a>大神 跟 程劭非(winter)老师 另外一个就不知道叫什么名字了 <img alt="" height="436" src="https://img-blog.csdnimg.cn/img_convert/d87b66634b89e9fe96f76b58b6b6e830.png" width="776"> &nbsp; index.html 
 <blockquote> 
 &lt;!DOCTYPE html&gt; 
 &lt;html lang="en"&gt; 
 &lt;head&gt; 
 &lt;meta charset="UTF-8"&gt; 
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; 
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
 &lt;title&gt;Document&lt;/title&gt; 
 &lt;/head&gt; 
 &lt;body&gt; 
 &lt;script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt; 
 &lt;script type="module" src="./index.js"&gt;&lt;/script&gt; 
 &lt;/body&gt; 
 &lt;/html&gt; 
 </blockquote> index.js <img alt="" height="1200" src="https://img-blog.csdnimg.cn/2021042019551762.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> 文字版&nbsp; 
 <blockquote> 
 // Promise() 同步 executer 同步 // const p = &nbsp;new Promise((resolve, reject) =&gt; { 
 // }) 
 &nbsp; 
 // // 异步 能否同步？ // p.then((res) =&gt; { 
 // }) 
 &nbsp; 
 // -------------------------- 问题： 为什么Promise执行是同步，p.then是异步？ // Promise存在的意义是什么？ &nbsp; // 要知道上面的答案： // 这里先用jquery来做演示 
 // 异步程序 &nbsp;跟下面的console.log是没有任何关系的，是异步的关系，但是还是先执行这个ajax请求，再执行console.log("I am a crazy guy!");&nbsp; // 只不过前者执行是有时间的，后者先执行完毕 
 // $.ajax({ // &nbsp; &nbsp; url: "http://localhost:3000/data.json", // &nbsp; &nbsp; success: function(data){ // &nbsp; &nbsp; &nbsp; &nbsp; console.log(getNames(data)); // &nbsp; &nbsp; } // }) 
 // console.log("I am a crazy guy!"); 
 &nbsp; 
 // // ------------------------ 现在的需求： 就是要拿到data.json数据中name的集合 // function getNames(data){ // &nbsp; &nbsp; return data.map((v) =&gt; v.name); // } 
 // 执行结果： // I am a crazy guy! // ["zhangsan", "lisi", "wangwu"] 
 &nbsp; 
 // -------------------------- 需求改变： // 现在要将success回调函数中的逻辑分离出来 
 // 如果改成如下样子： 是接受不到data的 
 // var data = $.ajax({ // &nbsp; &nbsp; url: "http://localhost:3000/data.json", // &nbsp; &nbsp; async: false, // 将异步变成同步程序 // }) 
 // console.log(getNames(data.responseJSON)); // // 上面的ajax请求与回调函数中的逻辑是同步关系，也就是业务逻辑分离出来，但是有个问题，就是也导致ajax与下面的程序形成了同步关系， 形成了阻塞。 // // 此时的打印结果： // // ["zhangsan", "lisi", "wangwu"] // // VM3296:1 I am a crazy guy! 
 // console.log("I am a crazy guy!"); 
 // // 现在的需求： 就是要拿到data.json数据中name的集合 // function getNames(data){ // &nbsp; &nbsp; return data.map((v) =&gt; v.name); // } 
 &nbsp; 
 // ---------------------------- 正是由于上面的问题，【将ajax请求的逻辑分离出来，而导致的ajax请求与所有的执行语句形成同步关系， 形成阻塞，而ajax本身是没办法解决的】 // 才出现了Promise， promise不是为了解决回调地狱的问题， 只是顺道解决了下， 而且并不是很优雅 
 // 使用Promise改造上面的程序如下： // 同步 &nbsp;// 当然jquery ajax本身有promise的封装，这里没有使用 // const p = &nbsp;new Promise((resolve, reject) =&gt; { // &nbsp; &nbsp; $.ajax({ // &nbsp; &nbsp; &nbsp; &nbsp; url: "http://localhost:3000/data.json", // &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){ // &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(data); // &nbsp; &nbsp; &nbsp; &nbsp; } // &nbsp; &nbsp; }) // }) 
 // // 必须是异步，如果是同步，就回到上面ajax请求，async为false，阻塞后续所有程序的问题上， promise就没有必要了 // p.then((res) =&gt; { // &nbsp; &nbsp; console.log(getNames(res)); // }) 
 // function getNames(data){ // &nbsp; &nbsp; return data.map((v) =&gt; v.name); // } 
 // console.log("I am a crazy guy!"); 
 // 此时打印结果： // I am a crazy guy! // ["zhangsan", "lisi", "wangwu"] 
 &nbsp; 
 // ------------------------ &nbsp;最终我们希望的执行顺序是这样的 // ajax // getNames // console // 一步一步【一句一句】执行， 而且console语句跟上面的操作还没有关系 
 // 真正解决回调地狱的方案是： async/await + Promise // 代码如下： 
 function getData(){ &nbsp; &nbsp; return new Promise((resolve, reject) =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "http://localhost:3000/data.json", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(data); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; }) &nbsp; &nbsp; }) } 
 async function doSth(){ &nbsp; &nbsp; // 这里的处理是异步问题同步化 &nbsp; &nbsp; const data = await getData(); &nbsp; &nbsp; console.log(getNames(data)); } 
 doSth(); 
 console.log("I am a crazy guy!"); 
 function getNames(data){ &nbsp; &nbsp; return data.map((v) =&gt; v.name); } 
 // 此时的输出结果： // I am a crazy guy! // ["zhangsan", "lisi", "wangwu"] &nbsp; 
 &nbsp; 
 </blockquote> &nbsp; 2.2&nbsp;手写promise version 1 // 简易版 只实现了resolve，then，暂时没有实现reject 和 catch， 以及其他的方法如all，some等 =====》 <a href="https://time.geekbang.org/column/article/136895" rel="nofollow">https://time.geekbang.org/column/article/136895</a>&nbsp; //极客时间 -&nbsp;&nbsp;浏览器工作原理与实践 -&nbsp;19 | Promise：使用Promise，告别回调函数&nbsp; ---- 推荐 
 <blockquote> 
 function Bromise(executor) { &nbsp; &nbsp; var onResolve_ = null &nbsp; &nbsp; var onReject_ = null &nbsp; &nbsp; &nbsp;//模拟实现resolve和then，暂不支持rejcet &nbsp; &nbsp; this.then = function (onResolve, onReject) { &nbsp; &nbsp; &nbsp; &nbsp; onResolve_ = onResolve &nbsp; &nbsp; }; &nbsp; &nbsp; function resolve(value) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(()=&gt;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onResolve_(value) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},0) &nbsp; &nbsp; } &nbsp; &nbsp; executor(resolve, null); } 
 &nbsp; 
 function executor(resolve, reject) { &nbsp; &nbsp; resolve(100) } 
 //将Promise改成我们自己的Bromsie let demo = new Bromise(executor) 
 function onResolve(value){ &nbsp; &nbsp; console.log(value) } demo.then(onResolve) &nbsp; 
 </blockquote> 这里使用setTimeout是为了模拟延迟绑定， 否则会报： 
 <blockquote> 
 Uncaught TypeError: onResolve_ is not a function &nbsp; &nbsp; at resolve (&lt;anonymous&gt;:10:13) &nbsp; &nbsp; at executor (&lt;anonymous&gt;:17:5) &nbsp; &nbsp; at new Bromise (&lt;anonymous&gt;:13:5) &nbsp; &nbsp; at &lt;anonymous&gt;:19:12 
 </blockquote> 上面采用了定时器来推迟 onResolve 的执行，不过使用定时器的效率并不是太高，好在我们有微任务， 所以 Promise 又把这个定时器改造成了微任务了，这样既可以让 onResolve_ 延时被调用，又提升了代码的执行效率。这就是 Promise 中使用微任务的原由了。 &nbsp; 网友的版本：// 似乎有点问题， 执行出现报错～ TBD 
 <blockquote> 
 function _Promise(executor) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._resolve = []; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._reject = []; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._catch; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*临时保存引用*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let self = this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.then = function (resolve, reject) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve &amp;&amp; this._resolve.push(resolve); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject &amp;&amp; this._reject.push(reject); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.resolve = function (data) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(() =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let callback = self._resolve.shift(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self._reject &amp;&amp; self._reject.shift(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let pro; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback &amp;&amp; (pro = callback(data)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self._resolve &amp;&amp; (pro._resolve = self._resolve); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self._reject &amp;&amp; (pro._reject = self._reject); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self._catch &amp;&amp; (pro._catch = self._catch); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 0) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.reject = function (error) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(() =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let callback; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self._reject &amp;&amp; (callback = self._reject.shift()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback &amp;&amp; callback(error); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback || self._catch(error); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.catch = function (callback) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._catch = callback; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;executor(this.resolve, this.reject); &nbsp;&nbsp;&nbsp;&nbsp;} function executor(resolve, reject) { &nbsp;&nbsp;&nbsp;&nbsp;let rand = Math.random(); &nbsp;&nbsp;&nbsp;&nbsp;console.log(1) &nbsp;&nbsp;&nbsp;&nbsp;console.log(rand) &nbsp;&nbsp;&nbsp;&nbsp;if (rand &gt; 0.5) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(rand) &nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(rand) } var p0 = new _Promise(executor); var p1 = p0.then((value) =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;console.log("succeed-1") &nbsp;&nbsp;&nbsp;&nbsp;return new _Promise(executor) }) var p3 = p1.then((value) =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;console.log("succeed-2") &nbsp;&nbsp;&nbsp;&nbsp;return new _Promise(executor) }) var p4 = p3.then((value) =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;console.log("succeed-3") &nbsp;&nbsp;&nbsp;&nbsp;return new _Promise(executor) }) p4.catch((error) =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;console.log("error") }) console.log(2) 
 </blockquote> &nbsp; version 2 // 完整版 TBD &nbsp; </td> 
 </tr> 
 </tbody> 
 </table>&nbsp; &nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

<table> 
 <tbody> 
 <tr> 
 <td> 1.练习, 下面代码的输出结果? 
 <blockquote> 
 function executor(resolve, reject) { &nbsp; &nbsp; let rand = Math.random(); &nbsp; &nbsp; console.log(1) &nbsp; &nbsp; console.log(rand) &nbsp; &nbsp; if (rand &gt; 0.5) &nbsp; &nbsp; &nbsp; &nbsp; resolve() &nbsp; &nbsp; else &nbsp; &nbsp; &nbsp; &nbsp; reject() } var p0 = new Promise(executor); 
 var p1 = p0.then((value) =&gt; { &nbsp; &nbsp; console.log("succeed-1") &nbsp; &nbsp; return new Promise(executor) }) 
 var p3 = p1.then((value) =&gt; { &nbsp; &nbsp; console.log("succeed-2") &nbsp; &nbsp; return new Promise(executor) }) 
 var p4 = p3.then((value) =&gt; { &nbsp; &nbsp; console.log("succeed-3") &nbsp; &nbsp; return new Promise(executor) }) 
 p4.catch((error) =&gt; { &nbsp; &nbsp; console.log("error") }) console.log(2) 
 </blockquote> 2. 下面代码输出结果 &nbsp; 
 <blockquote> 
 function sleep(duration) { &nbsp; &nbsp; return new Promise(function(resolve, reject) { &nbsp; &nbsp; &nbsp; &nbsp; console.log("b"); &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(resolve,duration); &nbsp; &nbsp; }) } console.log("a"); sleep(5000).then(()=&gt;console.log("c")); 
 </blockquote> 输出结果： <img alt="" height="310" src="https://img-blog.csdnimg.cn/20210405112158199.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="716"> &nbsp; 3. 下面代码输出结果？ 
 <blockquote> 
 function sleep(duration) { &nbsp; &nbsp; return new Promise(function(resolve, reject) { &nbsp; &nbsp; console.log(duration); &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(resolve,duration); &nbsp; &nbsp; }) } async function foo(name){ &nbsp; &nbsp; await sleep(2000) &nbsp; &nbsp; console.log(name) } async function foo2(){ &nbsp; &nbsp; await foo("a"); &nbsp; &nbsp; console.log('a-1') &nbsp; &nbsp; await foo("b"); &nbsp; &nbsp; console.log('b-1') } 
 foo2() 
 </blockquote> 输出结果如下：// async/await+promise可以实现异步代码同步化编程 <img alt="" height="520" src="https://img-blog.csdnimg.cn/20210405111148579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="647"> &nbsp; 4. 练习题 我们现在要实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景色，你会怎样编写这个代码呢？ 方式一：setTimeout 
 <blockquote> 
 // 比较原始的写法 function color () {&nbsp; console.log('green'); 
 setTimeout(() =&gt; { console.log('yellow'); 
 setTimeout(() =&gt; { console.log('red'); 
 setTimeout(color, 2000); }, 1000) }, 3000); } color(); 
 </blockquote> &nbsp; 方式二：async/await + promise 
 <blockquote> 
 function sleep(duration){ &nbsp; &nbsp; return new Promise(function(resolve){ &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(resolve, duration); &nbsp; &nbsp; }) } async function changeColor(duration,color){ &nbsp; &nbsp; document.getElementById("traffic-light").style.background = color; &nbsp; &nbsp; await sleep(duration); 
 } async function main(){ &nbsp; &nbsp; while(true){ &nbsp; &nbsp; &nbsp; &nbsp; await changeColor(3000,"green"); &nbsp; &nbsp; &nbsp; &nbsp; await changeColor(1000, "yellow"); &nbsp; &nbsp; &nbsp; &nbsp; await changeColor(2000, "red"); &nbsp; &nbsp; } } main() 
 </blockquote> 执行结果： <img alt="" height="287" src="https://img-blog.csdnimg.cn/20210405125338761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="871"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 5. 三个问题 1、Promise 中为什么要引入微任务？ 
 <blockquote> 
 由于promise采用.then延时绑定回调机制，而new Promise时又需要直接执行promise中的方法，即发生了先执行方法后添加回调的过程，此时需等待then方法绑定两个回调后才能继续执行方法回调，便可将回调添加到当前js调用栈中执行结束后的任务队列中，由于宏任务较多容易堵塞，则采用了微任务 
 </blockquote> 2、Promise 中是如何实现回调函数返回值穿透的？ 
 <blockquote> 
 首先Promise的执行结果保存在promise的data变量中，然后是.then方法返回值为使用resolved或rejected回调方法新建的一个promise对象，即例如成功则返回new Promise（resolved），将前一个promise的data值赋给新建的promise 
 </blockquote> 3、Promise 出错后，是怎么通过“冒泡”传递给最后那个捕获 
 <blockquote> 
 promise内部有resolved_和rejected_变量保存成功和失败的回调，进入.then（resolved，rejected）时会判断rejected参数是否为函数，若是函数，错误时使用rejected处理错误；若不是，则错误时直接throw错误，一直传递到最后的捕获，若最后没有被捕获，则会报错。可通过监听unhandledrejection事件捕获未处理的promise错误 
 </blockquote> &nbsp; 6.异步AJAX请求是宏任务吧？Promise是微任务，那么用Promise进行的异步Ajax调用时宏任务还是微任务？ &nbsp; 
 <blockquote> 
 作者回复: ajax就是xmlhttprequest，必然是宏任务！ 准确地说，Promise在执行resolve或者reject时，触发微任务，所以在Promise的executor函数中调用xmlhttprequest会触发宏任务。 如果xmlhttprequest请求成功了，通过resolve触发微任务 如果xmlhttprequest请求失败了，通过reject触发微任务 
 </blockquote> 7.老师 渲染流水线 在 微任务 之前 还是 之后 执行啊？ 
 <blockquote> 
 作者回复: 微任务也可以不触发渲染操作，也可以触发渲染操作！ 比如你也可以在微任务中通过js来修改dom，触发重绘，重排等动作！ 你也可以在微任务中执行一些逻辑运算，这就和页面渲染没有关系了！ 
 </blockquote> &nbsp; ... </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://wangdoc.com/javascript/async/promise.html" rel="nofollow">https://wangdoc.com/javascript/async/promise.html</a>&nbsp; //Promise 对象 <a href="https://time.geekbang.org/column/article/136895" rel="nofollow">https://time.geekbang.org/column/article/136895</a>&nbsp; //极客时间 -&nbsp;&nbsp;浏览器工作原理与实践 -&nbsp;19 | Promise：使用Promise，告别回调函数 <a href="https://es6.ruanyifeng.com/#docs/promise" rel="nofollow">https://es6.ruanyifeng.com/#docs/promise</a>&nbsp; &nbsp;//ECMAScript 6 入门&nbsp; - promise&nbsp; <a href="https://www.bilibili.com/video/BV1Np4y1k77K?t=10503" rel="nofollow">https://www.bilibili.com/video/BV1Np4y1k77K?t=10503</a>&nbsp;&nbsp; // 详解Promise <a href="https://www.bilibili.com/video/BV1ch411k7Ud" rel="nofollow">https://www.bilibili.com/video/BV1ch411k7Ud</a>&nbsp; //&nbsp;【全网首发:已完结】你真的知道『Promise的存在意义吗？』【基础知识必备】 -- 推荐 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...