一道常见的面试题

面试题题目

页面上有一个输入框，两个按钮，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的异步请求方式

总结

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