在前端调用的时候,我们难免需要同一时刻向后端请求多组数据或是总是期待着是否存在一个独立的线程去处理一系列的数据。线程相应,资源的抢占这是前端较为麻烦的点。这里就来聊聊我在前端踩的坑。

首先是线程问题说到线程,我们可以发现前端确实不是单一线程进行事务处理的。前端准备发出axios请求时会新开一个独立的线程并且是该线程进入等待阶段,等待后端数据的返回。那么原先的线程会继续执行。(这里需要描述清楚一点,线程和进程。一般现在电脑都是多核CPU也就是电脑同时能进行多条线程的运算。曾经设想过,假设一个线程能独立进行运算处理指定的数据,不影响其他业务的流转,结果发现想多了。)实验证明前端如果使用了等待算法。

async sleep (millisecond){
return new Promise(resolve => {
setTimeout(()=>{
resolve()
},millisecond);
})
}

当等待时间比较长,数据量比较大的情况下,整体界面相当于完全卡死。

当时场景是使用锐浪进行打印机调用,锐浪在获取打印模板和打印数据的时候都是自己独立进行的。之前由于如果在上一个数据执行完之前,下一个数据源再次重新获取后,会导致该功能报错,所以补了一个延时。从而进行控制,避免应用报错。

这时候我有一个假设,其实游览器一个页面只开了一个进程进行整体数据的处理,虽然内部不同的线程会不停的创建关闭,但是一旦涉及到到等待之类的,整体都会被拖死。

Promise.all的应用。

主线程中我开了多个后端调用,我准备等全部后端调用完成后再将界面的锁定进行放开,但是发现主线程走完了,Promise.all后面在慢慢执行,其确实是等全部的请求都获取到了,但是其并不会将主线程卡住。感觉更像是开了一个新的线程。去等待所以HTTP请求的结束。

那么应对这种方式,那么会将下一步的处理一到Promise.all中。

 1 setSampleOrder(model, reportSeqno) {
2 let oneItem = webRequest
3 .HttpPost('A',data)
4 .then(res => {
5 }).catch(error => {
6
7 })
8 deanTempList.push(oneItem);
9 oneItem = webRequest
10 .HttpPost('B',data)
11 .then(res => {
12 }).catch(error => {
13
14 })
15 Promise.all(deanTempList).then((res) => {
16 console.log("选项加载完成")
17 this.getReportItemList()
18 })
19 }

关于Vue多线程的思考的更多相关文章

  1. Python爬虫(十八)_多线程糗事百科案例

    多线程糗事百科案例 案例要求参考上一个糗事百科单进程案例:http://www.cnblogs.com/miqi1992/p/8081929.html Queue(队列对象) Queue是python ...

  2. 基于iscroll的better-scroll在vue中的使用

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...

  3. better-scroll在vue中的坑

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开“微信 —> 钱包—>滴滴出 ...

  4. better-scroll在vue中的应用

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 —> 钱包—>滴滴出行”体验效果. 什么是 better-scrol ...

  5. python 多线程糗事百科案例

    案例要求参考上一个糗事百科单进程案例 Queue(队列对象) Queue是python中的标准库,可以直接import Queue引用;队列是线程间最常用的交换数据的形式 python下多线程的思考 ...

  6. Python爬虫开发【第1篇】【多线程爬虫及案例】

    糗事百科爬虫实例: 地址:http://www.qiushibaike.com/8hr/page/1 需求: 使用requests获取页面信息,用XPath / re 做数据提取 获取每个帖子里的用户 ...

  7. 八、多线程爬虫(先占个位置,等整理好线程,进程,协程,异步IO在来写)

    计算机的核心是CPU,CPU承担了所有的计算任务. 一个CPU核心,一次只能执行一个任务: 多个CPU核心同时可以执行多个任务. 一个CPU一次只能执行一个进程,其他进程处于非运行状态. 进程里包含的 ...

  8. 5. vue常用高阶函数及综合案例

    一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...

  9. 手动实现一个vue cli

    目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个 ...

随机推荐

  1. Kafka与Spark案例实践

    1.概述 Kafka系统的灵活多变,让它拥有丰富的拓展性,可以与第三方套件很方便的对接.例如,实时计算引擎Spark.接下来通过一个完整案例,运用Kafka和Spark来合理完成. 2.内容 2.1 ...

  2. 【cartographer ros】十: 延时和误差分析

    上一节介绍了在cartographer进行建图和定位(在线和离线). 本节将分析cartographer运行时的误差与延迟,主要是在线定位时的,并尝试优化解决. 目录 1,误差分析 a,硬件精度 b, ...

  3. 万字长文:从计算机本源深入探寻volatile和Java内存模型

    万字长文:从计算机本源深入探寻volatile和Java内存模型 前言 在本篇文章当中,主要给大家深入介绍Volatile关键字和Java内存模型.在文章当中首先先介绍volatile的作用和Java ...

  4. 小白之Python基础(一)

    一.数字类型: 1.整形 十进制:默认为十进制:(如:99,100.......) 十六进制: 0x,0X开头的表示16进制数 二进制:0b,0B开头的表示2进制数 八进制: 0o,0O开头的表示8进 ...

  5. 在 Apache DolphinScheduler 上调试 LDAP 登录,亲测有效!

    点击上方 蓝字关注我们 作者 | 小钻风 01 背景 当看这边文章时,那得恭喜您终于找到宝藏,这是梦开始的地方-- 使用 Apache  DolphinScheduler 的小伙伴会遇到个挠脑袋的问题 ...

  6. HCIA-Datacom 3.4 实验四:实现VLAN间通信实验

    实验介绍: 划分VLAN后,不同VLAN的用户间不能二层互访,这样能起到隔离广播的作用.但实际应用中,不同VLAN的用户又常有互访的需求,此时就需要实现不同VLAN的用户互访,简称VLAN间互访.华为 ...

  7. 快速创建springboot项目,并进行增删改

    创建普通maven项目,pom依赖如下 <parent> <artifactId>spring-boot-starter-parent</artifactId> & ...

  8. kafka手动设置offset

    项目中经常有需求不是消费kafka队列全部的数据,取区间数据 查询kafka最大的offset: ./kafka-run-class.sh kafka.tools.GetOffsetShell --b ...

  9. 46th ECfinal 游记

    Day0 坐高铁坐了七小时从北戴河到西安,但第一次线下赛,来的路上还是很激动的 路上看到华山,下次来西安一定去爬 刚下高铁站遇到了一个不知道干啥的xjj xjj:可以占用您一点时间吗?谢谢了. 我:不 ...

  10. rh358 002 fact变量获取 ansible配置网络 service_facts

    通过ansible 获取网络信息 1.如何获取fact事实变量 方式1: ansible servera -m servera 方式2: 剧本 [root@workstation ansible]# ...