有这样一道关于 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 的执行顺序一致了。
大家有其他方法或者问题可以留言，或者直接发送消息。
欢迎关注、转发、点击好看