乐趣区

Promise面试题,控制异步流程

有这样一道关于 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 的执行顺序一致了。
大家有其他方法或者问题可以留言,或者直接发送消息。

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

退出移动版