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

首先是线程问题说到线程,我们可以发现前端确实不是单一线程进行事务处理的。前端准备发出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. react 吸顶实现

    今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...

  2. PHP小知识收集

    PEAR 是"PHP Extension and Application Repository"的缩写,即PHP扩展和应用仓库. PECL 是"PHP Extension ...

  3. YII自定义第三方扩展

    cat.php <?php /** * Created by PhpStorm. * Date: 2016/5/25 * Time: 15:23 */ namespace vendor\anim ...

  4. Computational Protein Design with Deep Learning Neural Networks

    本文使用深度神经网络完成计算蛋白质设计去预测20种氨基酸概率. Introduction 针对特定结构和功能的蛋白质进行工程和设计,不仅加深了对蛋白质序列结构关系的理解,而且在化学.生物学和医学等领域 ...

  5. Apache DolphinScheduler 是如何诞生的

    作者 | 代立冬,李岗 排版 | 开源之道小助理 Apache DolphinScheduler,简称"DS", 中文名 "小海豚调度"(海豚聪明.人性化,又左 ...

  6. 大家都能看得懂的源码(一)ahooks 整体架构篇

    本文是深入浅出 ahooks 源码系列文章的第一篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 第一篇主要介绍 ahooks 的背景以及整体架构. React h ...

  7. flask-restful使用指南

    flask-restful是flask模块的一个扩展,能够快速构建restful风格的api.对于其他的扩展也有很高的兼容性. 安装flask_restful pip install flask_re ...

  8. 渗透攻防Web篇-深入浅出SQL注入

    1 背景 京东SRC(Security Response Center)收录大量外部白帽子提交的sql注入漏洞,漏洞发生的原因多为sql语句拼接和Mybatis使用不当导致. 2 手工检测 2.1 前 ...

  9. tomcat服务器和servlet的基本认识

    今天下午在知乎看见了一个老哥的文章,写的是servlet写的很好,以前我对Javaweb方面的理解比较混乱今天看了这位老哥的文章后受益匪浅,知乎名叫:bravo1988​ 里面也有讲servlet和s ...

  10. win10+Android(华为)系统原生日历同步方案+Sol日历桌面显示

    前言:本文是参考了其他博客基础上,新增了Android的免费桌面[月试图显示]功能.以及适配于上海交通大学的Canvas教学日历.方便进行多设备同步的日历管理.任务提醒. 目录 1.效果展示 2.方案 ...