uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?
总结/朱季谦
先前有一次做uni-app的js接口对接时,遇到过这样的情况,在for循环里,调用一个异步请求时,返回来的值顺序是乱的,因此,在以下的代码里,push到数组里的值,每次的顺序可能都是不一样的,造成这样一个原因,是for循环是单线程的,异步请求是多线程的,f往往在for循环结束了,异步请求还没有结束。
that.list = res.datas.class_list;
for(var i=0;i<that.list.length;i++){
that.list[i].tlist = []
var url = "w=goods_class&gc_id=" + that.list[i].gc_id.substring(2);
that.thtxb_ajax_request(url, {}).then((res) => {
that.tlist.push(res.datas.class_list)
})
}
在uni-app框架里,遇到这样的类似代码时,可以用递归算法来避免for循环结束了,异步请求还没有结束的问题,将上面的代码修改成递归形式,如下:
that.list = res.datas.class_list;
var i = 0;
getImg();
function getImg() {
if (i >= that.list.length) {
return;
}
that.list[i].tlist = []
var url = "w=goods_class&gc_id=" + that.list[i].gc_id.substring(2);
that.thtxb_ajax_request(url, {}).then((res) => {
that.tlist.push(res.datas.class_list)
i++
getImg();
})
}
按照这样的修改,便可以避免for循环里调用异步请求出现的问题了。
其他js也可以按照这个思路,用递归算法的思想。
uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?的更多相关文章
- for循环中嵌套异步请求问题
for循环中嵌套了异步请求会导致顺序错乱,用递归代替for循环,可以保证正常执行顺序:
- 解决sql2008连接数据库,无法为该请求检索数据,错误916
通常在使用sql server management studio 2008 连接数据库,可以链接上,但是无法查看自己的数据库,点击数据库或刷新数据库列表后,提示:无法为该请求检索数据,错误916,如 ...
- wemall app商城源码中基于JAVA通过Http请求获取json字符串的代码
wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.分享其中关于通过Http请求获取json字符串的代码供 ...
- 解决Flex4在Module里调用PopUpManager报错问题
项目大了 就需要用到Module, 发现在一个Module里边, 和普通应用里一样popup一个组件的时候, 总是会报错. 这个在Flex3的时候也会出现, 会报样式错误 所以就想到了addPopUp ...
- iOS 信号量解决-网络异步请求的数据同步返回问题
有那么一个场景如下 +PayWithBlock:(NSString*(^)(NSString *message)) block; 如果 block 返回是同步的那是没有问题的,但是如果block 内容 ...
- 关于前端ajax请求获取数据成功之后无法操作数据的原因及解决方法
前言:做项目的时候我用ajax请求json数据,遍历使用数据时却发现页面无响应.关于这个问题今天有个朋友又问了我一次,记录一下.由于我没有记录,这里用我朋友的图片. 代码现象: 这里他是使用alert ...
- for循环中进行联网请求数据、for循环中进行异步数据操作,数据排序错乱问题解决;
for循环中进行联网请求数据,由于网络请求是异步的,第一个网络请求还没有回调,第二次第三次以及后续的网络请求又已经发出去了,有可能后续的网络请求会先回调:这时我们接收到的数据的排序就会错乱:怎么才能让 ...
- 【读书笔记】iOS网络-异步请求与运行循环
异步请求需要运行循环.当数据传递到服务器或是被客户端接收时,运行循环用于实现事件与委托对象之间的通信.异步请求在发出时,会在当前线程的运行循环上操作,这个实现细节是很重要的,因为在GCD块中或者是通过 ...
- 【读书笔记】iOS-网络-异步请求与运行循环
异步请求需要运行循环.当数据传递到服务器或是被客户端接收时,运行循环用于实现事件与委托对象之间的通信.异步请求在发出时,会在当前线程的运行循环上操作,这个实现细节是很重要的,因为在GCD块中或者是通过 ...
随机推荐
- maven 学习---将项目安装到Maven本地资源库
在Maven中,可以使用“mvn install”打包项目,并自动部署到本地资源库,让其他开发人员使用它. mvn install 注意,当“install”在执行阶段,上述所有阶段 “validat ...
- linux线程绑定cpu
函数介绍 #define __USE_GNU #include <sched.h> void CPU_ZERO(cpu_set_t *set); void CPU_SET(int cpu, ...
- vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )
一.路由的配置 路由 vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...
- LeetCode——Customers Who Never Order(灵活使用NOT IN以及IN)
Suppose that a website contains two tables, the Customers table and the Orders table. Write a SQL qu ...
- centos7,python2和python3共存
安装依赖包 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk- ...
- 华为云fusionsphere 6.1组件功能
[fsp@controller-21 ~]$ openstack --version ##fusionsphere 6.1基于openstack 2.2.1 [fsp@controller-21 ...
- windows删除桌面右键“英特尔@显卡设置”
运行中输入:regedit 确认运行注册表编辑器,依次单击展开 HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers键 ...
- 201871010121-王方《面向对象程序设计JAVA》第十五周实验总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...
- opencv局限:cv::FileStorage读取中,xml文件的第一层节点不能超过4个
今天测试发现一个问题,cv::FileStorage读取中,xml文件的第一层节点不能超过4个. <?xml version="1.0"?> <opencv_st ...
- openlayers在底图上添加静态icon
越学习openlayer你会发现openlayer是真的很强大,今天记录一下学习的成果,需求是做那种室内的CAD的场景然后里面展示人员icon并且实时展示人员的位置信息,以及点击弹出对应人员的一些位置 ...