本篇内容介绍了“Promise控制异步流程怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
题目：页面上有一个输入框，两个按钮，A按钮和B按钮，点击A或者B分别会发送一个异步请求，请求完成后，结果会显示在输入框中。
题目要求，用户随机点击A和B多次，要求输入框显示结果时，按照用户点击的顺序显示，举例：
用户点击了一次A，然后点击一次B，又点击一次A，输入框显示结果的顺序为先显示A异步请求结果，再次显示B的请求结果，最后再次显示A的请求结果。
UI界面如图：
这个需求该如何用promise来实现呢？代码如下：
计算
安全
数据库
网络和加速
企业服务
//dom元素 var a = document.querySelector("#a") var b = document.querySelector("#b") var i = document.querySelector("#ipt"); //全局变量p保存promie实例 var P = Promise.resolve(); a.onclick = function(){ //将事件过程包装成一个promise并通过then链连接到 //全局的Promise实例上，并更新全局变量，这样其他点击 //就可以拿到最新的Promies执行链 P = P.then(function(){ //then链里面的函数返回一个新的promise实例 return new Promise(function(resolve,reject){ setTimeout(function(){ resolve() i.value = "a"; },1000) }) }) } b.onclick = function(){ P = P.then(function(){ return new Promise(function(resolve,reject){ setTimeout(function(){ resolve() console.log("b") i.value = "b" },2000) }) }) }我们用定时器来模拟异步请求，仔细于阅读代码我们发现，在全局我们定义了一个全局P，P保存了一个promise的实例。
然后再观察点击事件的代码，用户每次点击按钮时，我们在事件中访问全局Promise实例，将异步操作包装到成新的Promise实例，然后通过全局Promise实例的then方法来连接这些行为。
连接的时候需要注意，then链的函数中必须将新的promise实例进行返回，不然就会执行顺序就不正确了。
需要注意的是，then链连接完成后，我们需要更新全局的P变量，只有这样，其它点击事件才能得到最新的Promise的执行链。
这样每次用户点击按钮就不需要关心回调执行时机了，因为promise的then链会按照其连接顺序依次执行。
这样就能保证用户的点击顺序和promise的执行顺序一致了。
“Promise控制异步流程怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4582019/blog/4379056
