javascript从后端获取数据逐个消费

庄先生~

已于 2024-01-09 09:55:08 修改

阅读量199

点赞数 4

分类专栏：个人专栏文章标签： javascript 前端开发语言

于 2023-12-17 15:04:55 首次发布

本文链接：https://blog.youkuaiyun.com/zjm16/article/details/135044957

版权

个人专栏专栏收录该内容

2 篇文章

订阅专栏

javascript从后端获取数据逐个消费

<body>
    <input onclick="doClick()" type="button" value="获取流水号">
</body>

<script>
    const loadSerialNumbers = (delay) => new Promise((resolve, reject) => {
        if (false) {
            setTimeout(reject, delay, new Error(123))
        } else {
            setTimeout(resolve, delay, [1, 2, 3])
        }
    })
    class SerialNumber {
        constructor() {
            this._queue = []
            this.serialNumbers = []
            this._loading = false
        }

        consume(push = true) {
            return new Promise((resolve, reject) => {
                if (push) {
                    this._queue.push({ resolve, reject })
                } else {
                	resolve()
				}

                while (this.serialNumbers.length > 0 && this._queue.length > 0) {
                    this._queue.shift().resolve(this.serialNumbers.shift())
                }

                if (!this._loading && this._queue.length > 0) {
                    this._loading = true
                    loadSerialNumbers(2000).then(serialNumbers => {
                        this.serialNumbers = serialNumbers
                        this._loading = false
                        this.consume(false)
                    }).catch(error => {
                        while (this._queue.length > 0) {
                            this._queue.shift().reject(error)
                        }
                        this._loading = false
                    })
                }
            })
        }
    }

    const serialNumber = new SerialNumber()

    async function doClick() {
        const env = await serialNumber.consume()
        console.log(env)
    }

    function doClick2() {
        serialNumber.consume().then(data => console.log(data), error => console.info(error))
    }

</script>