一道常见的面试题

面试题题目

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

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

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

思考

当时被问到的时候，几个想法

1. 写个高阶函数，处理异步请求
2. 怎么保证顺序，我是想将其放入数组中，然后按顺序执行

当时也没写出来，但觉得很有意思。回去思考实践来一下

代码：

/**
 * A 的请求；pA(promise 对象)
 * B 的请求；pA(promise 对象)
 * @click 事件函数 handler
 */
let arr = []
let it
function* main() {
    // 进来的是 pA，pB 封装后的方法
    const data = yield arr.unshift()()
    if(arr.length > 0) {it = main()
        it.next()}
}
it = main()
// 封装 pA,pB 的请求
function pn(promise) {return promise.then(res => it.next(res))
}
// 当点击按钮发送请求时, 将相应的请求加入数组中
function handler(pn) {arr.push(pn)
    // 数组不为空说明请求触发中
    if(arr.length = 0) {it.next()
    }
}

说明

1. 点击按钮时，先发放入请求；数组为空说明，还没执行；就先执行；不为空，则加入数组中，等待执行
2. 利用迭代器，遍历数组，执行请求
3. 封装函数 fn，思路来自之前看的Generator 的异步请求方式

总结

以上是我自己思路，觉得蛮有意思的。写下来记录一下