Promise控制异步流程怎么实现

本篇内容介绍了“Promise控制异步流程怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联建站专注于承德县企业网站建设,自适应网站建设,商城系统网站开发。承德县网站建设公司,为承德县等地区提供建站服务。全流程按需求定制设计,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务

题目:页面上有一个输入框,两个按钮,A按钮和B按钮,点击A或者B分别会发送一个异步请求,请求完成后,结果会显示在输入框中。

题目要求,用户随机点击A和B多次,要求输入框显示结果时,按照用户点击的顺序显示,举例:

用户点击了一次A,然后点击一次B,又点击一次A,输入框显示结果的顺序为先显示A异步请求结果,再次显示B的请求结果,最后再次显示A的请求结果。

UI界面如图:

Promise控制异步流程怎么实现

这个需求该如何用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控制异步流程怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网站题目:Promise控制异步流程怎么实现
文章起源:http://pwwzsj.com/article/jsepde.html