Promise面试题，掌握异步流程

2019年8月31日 189次阅读 来源: 假前端

有如许一道关于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面试题，掌握异步流程》

迎接关注、转发、点击悦目

    原文作者：假前端
    原文地址: https://segmentfault.com/a/1190000018319273
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞