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

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>
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HBuilderX是一个轻量级但功能强大的前端集成开发环境(IDE),主要面向前端开发者,用于开发Web应用和移动应用。在HBuilderX中获取后端数据通常是通过前端技术如JavaScript配合HTTP请求实现的,常见的方法有使用AJAX、Fetch API或者第三方库如axios。 1. 使用AJAX:传统的AJAX请求是通过XMLHttpRequest对象来实现的,但现代开发中更常用的是较新标准的Fetch API。 2. 使用Fetch API:Fetch API提供了一个强大的接口用于从服务器异步获取资源,比传统的XMLHttpRequest更简洁、更容易使用,返回的是Promise对象,可以配合async/await简化异步编程。 一个使用Fetch API获取数据的基本示例代码如下: ```javascript // 使用Fetch API从后端获取数据 fetch('你的后端API地址') .then(response => response.json()) // 解析JSON格式数据 .then(data => { // 在这里处理获取到的数据 console.log(data); }) .catch(error => { // 处理请求错误 console.error('请求出错:', error); }); ``` 3. 使用第三方库axios:axios是一个基于Promise的HTTP客户端,可以用于浏览器和node.js中,它提供了一个更简洁的API和一些额外的功能(如请求拦截、响应拦截、取消请求等)。 使用axios获取数据的基本示例代码如下: ```javascript // 引入axios库 const axios = require('axios'); // 使用axios从后端获取数据 axios.get('你的后端API地址') .then(response => { // 在这里处理获取到的数据 console.log(response.data); }) .catch(error => { // 处理请求错误 console.error('请求出错:', error); }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

庄先生~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值