uniCloud 循环提交/请求导致数据顺序错乱的问题

异步的理解:

异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。

在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情,比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程,所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限:一旦发射了以后就会与主线程失去同步,我们无法确定它的结束,如果结束之后需要处理一些事情,比如处理来自服务器的信息,我们是无法将它合并到主线程中去的。

为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它(异步任务、子线程):等你(异步任务、子线程)完成了这个任务之后要干什么(执行回调函数)。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。

async、await的理解:

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误。

await 操作符用于等待一个 Promise 对象(一个 Promise 对象或者任何要等待的值。), 它只能在异步函数 async function 内部使用。

await针对所跟不同表达式的处理方式:Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。非 Promise 对象:直接返回对应的值。

异步函数 async function 中可以使用 await 指令,await 指令后必须跟着一个 Promise,异步函数会在这个 Promise 运行中暂停,直到其运行结束再继续运行。(可以理解为,await后面跟着一个子进程,这个子进程去一旁执行了,不影响主进程的继续进行,等这个子进程执行完毕了,会返回一个Promise 对象或者任何要等待的值,这个对象或者等待的值就是await等待的。await收到这个等待的对象或等待的值之后,再返回到主进程。)

暂时未找到解决办法,记录一下。

找到了解决的方法:递归

这种代码导致数据顺序错乱

for (var i = 1; i < this.count; i++) {
                huoquzhenti.get('sd21', i).then((res) => {
                    uni.hideLoading()
                    // console.log(res.data[0])
                    // this.record = res.data[0]
                    // console.log(this.record.tihao)
                    this.zhentishuzu.push(res.data[0])
                }).catch((err) => {
                    uni.hideLoading()
                    uni.showModal({
                        content: `查询失败,错误信息为:${err.message}`,
                        showCancel: false
                    })
                    console.error(err)
                })
            }

用递归后,数据顺序正确。一开始没理解,后来理解了非常好用。

        data() {
            return {
                zhentishuzu: [],
                count: 8,
                index:1
            }
        },
        onLoad() {
            // 递归
            this.digui(this.index,this.zhentishuzu)
        },
        methods: {
            // 递归
            digui(i) {
                huoquzhenti.get('sd21', i).then((res) => {
                    uni.hideLoading()
                    // console.log(res.data[0])
                    // console.log(this.record.tihao)
                    this.zhentishuzu.push(res.data[0])
                    console.log(this.zhentishuzu)
                    this.index++
                    console.log(this.index)
                    if(this.index<10){
                        this.digui(this.index)
                    }
                }).catch((err) => {
                    uni.hideLoading()
                    uni.showModal({
                        content: `查询失败,错误信息为:${err.message}`,
                        showCancel: false
                    })
                    console.error(err)
                })
                
            },
        }

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值