Promise面试题，控制异步流程

boredream 发布于2019-08-23 15:31 / 977人阅读

摘要：有这样一道关于的面试题，描述如下页面上有一个输入框，两个按钮，按钮和按钮，点击或者分别会发送一个异步请求，请求完成后，结果会显示在输入框中。大家有其他方法或者问题可以留言，或者直接发送消息。

有这样一道关于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的执行顺序一致了。

大家有其他方法或者问题可以留言，或者直接发送消息。

欢迎关注、转发、点击好看

云服务器私有云 jquery_promise异步面试题栈面试题笔试面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102172.html

Promise面试题2实现异步串行执行

摘要：按照要求实现函数，把传进去的函数数组按顺序先后执行，并且把返回的数据先后放到数组中。例子中我们是按顺序执行的，但是输出的结果却是，对于这些异步函数来说，并不会按顺序执行完一个，再执行后一个。按照要求：实现 mergePromise 函数，把传进去的函数数组按顺序先后执行，并且把返回的数据先后放到数组 data 中。代码如下：const timeout = ms => new Pro...

cikenerd 2019-08-23 15:31 评论0 收藏0
高级前端面试题大汇总（只有试题，没有答案）

摘要：面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。有些面试题会重复。使用过的koa2中间件 koa-body原理介绍自己写过的中间件有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理如何和MySQL进行通信 React声明周期及自己的理解如何...

kviccn 2019-08-23 13:41 评论0 收藏0
2018大厂高级前端面试题汇总

摘要：面试的公司分别是阿里网易滴滴今日头条有赞挖财沪江饿了么携程喜马拉雅兑吧微医寺库宝宝树海康威视蘑菇街酷家乐百分点和海风教育。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。面试的公司分...

zzir 2019-08-23 12:38 评论0 收藏0