首页 > 其他分享 >JS异步笔记

JS异步笔记

时间:2023-10-07 10:44:42浏览次数:33  
标签:异步 console 小明 await 笔记 JS Promise async

Promise

最早接触异步是在.net中,当时还是比较流行使用基于控件的BackgroundWorker,其自身通过子线程的方式来异步处理一些情况,并且封装了一些功能与主线程通信。后来,开始使用Thread,再后来,因为Thread的性能与生成数量的不可控,使用了ThreadPool,再后来,出现了Task,随后async、await如发而至。在理解了async和await之后不久,es2015便为js也带来了Promise,以解决在js中大量的callback的问题(说实话,在层数不多的情况下,用callBack还是很爽的,可能年纪大了,思维有些固守了)。Promise使得无处不在的callBack得到了控制,阅读追踪代码也终于变得方便了。

关于Promise,可以参考其白皮书https://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects,在MDN上,给出的使用方法是

var DoWork=new Promise( function(resolve, reject) {...} /* executor */  );

其中,resolve和reject也是回调函数(callback),并且在{...}的语法块中,如果一切正常则调用resolve回调方法返回,如果有问题,则调用reject回调方法返回。这像极了原来的回调方式(如function DoWork(SuccessCallBack,ErrorCallBack){...}。但是,其最大的特点则在于,返回的并不是function了,而是一个Promise对象,这也为以后的await的加入铺好了路。同样,在调用的时候,语法糖也甜得很。

原本DoWork的调用方法:

DoWork(()=>{alert("success");},err=>{ alert("fail");});

新的调用方法:

DoWork().then(()=>{alert("success");}).catch(err=>{alert(err);});

想来,聪明的你,并没有发现这种用法的场景中,有何优势。当然,优势还是有的,比较在使用Promise.All()函数的时候,则可以使得多个并发任务同时执行,只有在每一个任务都完成的情况下,才执行then的后续方法。另外,写法上,将之前的内层嵌套改为现在的外层用.的链式调用,在美观和可读性上,提升了不少,还有其它一些优势,这里就不多说了,因为今天Promise不是主角,它只是主角的爹妈,,而主角则是async/await

async/await

做了这么多年的c#开发,微软给我的最大感觉的就是,语法糖真的甜。之前遇到一个微信的开发框架Senparc.Weixin SDK也是同样的开发理念,说实话,真的好,能让开发人员少写一行就绝不让多写一行,能让开发人员少动脑子就不让其多动脑子,这样,可以有更大的精力放在处理业务以及构造程序逻辑关系上。js的`async/await和.net的非常像,这里就不说.net了,只说js中async/await`的用法。

对于async/await(打起来好烦,下文就用aa表示了(冰魂:……))来说,它最大的优势在于,可以以同步代码的方式来实现异步,并且与人的自然认识非常的吻合。

举个例子:
1、给小明钱。
2、让小明去超市买西瓜,如果有西瓜就买回来,如果没有,则买苹果,如果苹果也没有,就把钱还给我。
3、给小丽个椅子。
4、让小丽在这儿看电视。


var XiaoMingGoToMarket = return Promise(resolve,reject=>{
        setTimeout(()={

			if(有西瓜()){
				resolve("买了西瓜");
			}else if(有苹果()){
				resolve("买了苹果");
			}else{
				reject("啥也没买,钱还给你吧");
			}
		},5*1000);//五分钟后到超市
async function MakeXiaoMingToMarket(){
	console.log("知道了,现在就准备去超市");
	try{
		var 买的水果= await XiaoMingGoToMarket();
		console.log("买到了"+买的水果);
	}catch(err){
		console.log("啥也没买到,"+err);
	}
}

console.log('1、给小明钱');
console.log("2、让小明去超市买西瓜,如果有西瓜就买回来,如果没有,则买苹果,如果苹果也没有,就把钱还给我");
MakeXiaoMingToMarket();
console.log('3、给小丽个椅子。');
console.log('4、让小丽在这儿看电视。');

以上代码,先不看XiaoMiGoToMarket这个定义,下面的五行代码就非常的接近人的思维,其主体是我,我在一件件的下命令,至于客体要怎么做,什么时候去做我不管。对于我来讲,这五行代码是同步的,有严格的先后顺序,因为“我”下命令本身就是有先后的。但是,在我下指令给小明让小明去做事情 的时候,它去超市这段在路上的时间,是异步的。所以,对于小明来说,他的事情分为三部分(不考虑回来的事情):1、接收我的指令。2、走在路上(比较耗时)。3、到了超市买东西并告诉我结果。其中,接收我的指令是与我直接相关的,我需要知道他是否真的接收到我的指令了,所以,与我是同步的。在他接收到我的指令之后 ,我再给小丽一个椅子(不然,估计我就自己亲自去买了)。这是小明的第一部分做的事情,其第二部分,则是await那一句,那一句,则是产生异步的开始,await其实就是小明去买水果了,同时,离开我的视线,我与他的同步关系也就断开了,我开始“给小丽个椅子”了,然后继续做我自己的事情。至于小明,等他的await的事情(去超市买东西)完成了之后,他会接着await下面的语句,将下面的事情做完。

大概就是这么个过程,其实原理很简单。
就是:
1、async function会被拆成两份,以await语法分开,之前一部分(不包含await本身),我们称它为PreWork,之后一部分我们你之为AftWork。
2、PreWork是同步代码,要非async的function中的代码一样,与调用函数同步。
3、当函数插到await,即AftWork代码时,因为await后面跟着的是Promise,所以,此时,异步执行Promise,同时,将AftWork打包为一个函数,放在旁边。同时,调用方法的执行焦点,从async function中返回,继续去执行自己的代码。
4、当await后面的Promise执行完成后,如果其内部调用了resolve,则执行之前放在旁边的由AftWork打包的一个临时函数。如果其内部调用了reject,则在await这一句这儿,向外抛出一个异常,其异常内容为reject(err)时其参数的内容。

 

【出处】:https://www.cnblogs.com/ensleep/p/10710842.html

标签:异步,console,小明,await,笔记,JS,Promise,async
From: https://www.cnblogs.com/mq0036/p/17745765.html

相关文章

  • .net List.ForEach内部Async/Await 异步的问题
    在开发异步的WebApi时,发现一个线程并发错误,起初以为SqlSugar问题。后来,经查是代码写的问题。但此问题,不遇到,不会知晓,只有异步才会出现此问题。这种问题,也发生在JavaScript下,代码逻辑是一样的。参看这篇:https://advancedweb.hu/how-to-use-async-functions-with-array-foreach-in-......
  • JS逆向实战23 某市wss URL加密+请求头+ws收发
    声明本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!本文首发链接为:https://mp.weixin.qq.com/s/o5UCJFhBg-4JFdS0aEwDuw前言在此前。我们先来了解下什么是......
  • 混淆技术研究笔记(六)如何基于yGuard实现?
    确定参考<adjust>作为入口后,就需要详细了解这部分代码的逻辑。需要看yguard源码了,你会如何阅读一个完全不了解的源码?我通常的策略都是找一个目标,添加代码依赖,写好demo,debug跟踪代码看。如果漫无目的的看,很难串起来整个流程,范围太大也容易迷失。先在配置中增加<adjust>配置:......
  • 为什么js中不推荐使用eval函数
    eval函数的作用'eval'函数是javascript中的一个内置函数,它的主要作用是将传入的字符串作为代码来执行。换句话说,'eval'可以将动态生成的字符串当作javascript代码来执行,并返回执行结果。我的理解就是它可以执行传入的代码,并返回执行结果。为什么不推荐使用eval1、安全性问题:'......
  • 【爬虫实战】用python爬小红书某话题的笔记,以#杭州亚运会#为例
    目录一、爬取目标二、爬虫代码讲解2.1分析过程2.2爬虫代码三、演示视频四、获取完整代码一、爬取目标您好!我是@马哥python说,一名10年程序猿。最近的亚运会大家都看了吗。除了振奋人心,还主打一个爱憎分明(主要针对小日子和韩国),看了的小伙伴都懂得!我用python爬取了小红书上#杭......
  • 《流畅的Python》 读书笔记 231007(第二章第一部分)
    第2章数据结构ABC语言是Python的爸爸~很多点子在现在看来都很有Python风格:序列的泛型操作、内置的元组和映射类型、用缩进来架构的源码、无需变量声明的强类型不管是哪种数据结构,字符串、列表、字节序列、数组、XML元素,抑或是数据库查询结果,它们都共用一套丰富的操作:迭......
  • jsp与Dao层合作实现分页功能
    studentList.jsp里面加样式居中和分页栏居中:.pagination{    text-align:center;}  分页栏: <divclass="pagination">    <c:iftest="${currentPage>1}">        <ahref="${pageContext.request.contextPath}/ShowStudentServlet?pa......
  • 组合数学学习/复习笔记
    模板(前置芝士)P1226【模板】快速幂|取余运算目的:顾名思义,快速求解乘方。实现:挺好写的。题目传送门代码P3811【模板】乘法逆元开longlong!!定义:若\(a*x\equiv1\pmodb\),且\(a\)与\(b\)互质,那么就能定义\(x\)是\(a\)在模\(p\)意义下的逆元,记为\(a^{......
  • js 获取当天属于当年中第几周
      functiongetWeek(dt){letd1=newDate(dt);letd2=newDate(dt);d2.setMonth(0);d2.setDate(1);letrq=d1-d2;letdays=Math.ceil(rq/(24*60*60*1000));......
  • 【学习笔记】(13) 平衡树——记住不的板子
    TreapSplay无旋Treap——fhqtreap简介就是没有旋转操作的Treap,一些性质什么的都跟Treap类似。算法介绍(1)merge(x,y)将两棵“有序”(x中元素的权值最大值小于y中元素权值最小值)的Treap合并成一棵。intch[N][2],sz[N],pri[N],val[N];//val为权值,pri为优先级,sz......