【javascript】实现一个封装请求ajax器

前言

• 这个是群里朋友问的，感觉很有意思。
• 要求是这样：
• 1、限制一次同时发送的ajax请求数量
• 2、timeout限制
• 3、重试n次。
• 给了段开头代码:

const axios = require('axios')
axios.post()

• 另外说了这个限制数量的话，超出的要等待前面完成才行。

分析

• 首先这个超时axios里是有配置的，就算写XMLHttpRequest或者ie那个，也得在上面设置。
• 然后是限制发送请求数量，这个比较难，要么在源码里弄，要么就自己封装，自己封装还有点麻烦，因为你要保证每个都能获取到最后结果。
• 重试次数也好搞，就是reject做递归。
• 但是这些异步结合起来就很乱，得设计好怎么调用再写。
• 一般来说，先把大问题全拆开来，再考虑后面合并。
• 所以先做个限定进出并可以等待的队列。然后再思考如何利用axios的回调。

限定进出可等待队列

• 我一开始准备用redux思路写，但redux那个执行就直接foreach然后fn都执行了，这样就没法控制已经完成了几个异步函数并让等待队列中的去执行。
• 所以我想到了webpack中有个库叫semaphore，这个思路类似于redux，但是放入的异步函数执行完毕要调用它的leave，通过这种调用方式，可以得知任务的完成，从而进行判断是否有等待的函数需要被执行。

class ArrList {
    constructor(available) {
        this.available = available
        this.waiters = []
        this._continue = this._continue.bind(this)
    }
    take(task) {
        if (this.available > 0) {
            this.available--;
            task()
        } else {
            this.waiters.push(task)
        }
    }
    leave() {
        this.available++
        if (this.waiters.length > 0) {
            this._continue()
        }
    }
    _continue() {
        if (this.available > 0) {
            this.available--;
            let task = this.waiters.shift()
            if (task) {
                task()
            }
        }
    }
}
let ins = new ArrList(2)
console.time('cost')
ins.take(
    () => setTimeout(() => {
        console.log(1)
        ins.leave()
    }, 1000)
)
ins.take(
    () => setTimeout(() => {
        console.log(2)
        ins.leave()
    }, 1000)
)
ins.take(
    () => setTimeout(() => {
        console.log(3)
        ins.leave()
    }, 1000)
)
ins.take(
    () => setTimeout(() => {
        console.log(4)
        ins.leave()
    }, 1000)
)
ins.take(
    () => setTimeout(() => {
        console.log(5)
        ins.leave()
    }, 1000)
)
ins.take(
    () => setTimeout(() => {
        console.log(6)
        ins.leave()
    }, 1000)
)
ins.take(
    () => setTimeout(() => {
        console.log(7)
        ins.leave()
        console.timeEnd('cost')
    }, 1000)
)

• 我这里take了7个异步函数，队列最多2个执行，所以需要花费ceil(7/2)=4秒时间。

初步实现包装

• 将其包装，让用户调用时直接then能收到数据。

let axios = require('axios')
class MyAxios {
    constructor(listLength) {
        this.arrIns = new ArrList(listLength)
    }
    axios(method, url, config) {
        return new Promise((resolve, reject) => {
            this.arrIns.take(() => axios[method](url, config).then(res => {
                resolve(res)
                this.arrIns.leave()
            }).catch((err) => {
                reject(err)
                this.arrIns.leave()
            }))
        })
    }
}
let myaxiosIns = new MyAxios(2)
myaxiosIns.axios('get', 'http://localhost:4002/dd', { timeout: 3000 }).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))
myaxiosIns.axios('get', 'http://localhost:4002/dd', { timeout: 3000 }).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))
myaxiosIns.axios('get', 'http://localhost:4002/dd', { timeout: 3000 }).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))
myaxiosIns.axios('get', 'http://localhost:4002/dd', { timeout: 3000 }).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))

递归重试

• 这个配合嵌套这么多的异步就容易晕了。用递归老方法，使用全局变量，然后提取函数就可以了：

class MyAxios {
    constructor(listLength) {
        this.arrIns = new ArrList(listLength)
    }
    axios(method, url, config, retryNum) {
        return new Promise((resolve, reject) => {
            let retry = 0
            let fn = () => axios[method](url, config).then(res => {
                resolve(res)
                this.arrIns.leave()
            }).catch((err) => {
                if (retry < retryNum) {
                    retry++
                    fn()
                } else {
                    reject(err)
                    this.arrIns.leave()
                }
            })
            this.arrIns.take(fn)
        })
    }
}
let myaxiosIns = new MyAxios(2)
myaxiosIns.axios('get', 'http://localhost:4002/dd', { timeout: 3000 }, 3).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))
myaxiosIns.axios('get', 'http://localhost:4000/', { timeout: 3000 }, 2).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))
myaxiosIns.axios('get', 'http://localhost:4002/dd', { timeout: 3000 }, 1).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))
myaxiosIns.axios('get', 'http://localhost:4002/dd', { timeout: 3000 }, 0).then(res => {
    console.log(res.data)
}).catch(res => console.log(res.data))