当前位置 博文首页 > 大曾blog:DaZeng:深入解读ES6系列(四)

    大曾blog:DaZeng:深入解读ES6系列(四)

    作者:[db:作者] 时间:2021-08-03 15:43

    8.0 来自老曾es6的前言:

    • 哈喽小伙伴们,爱说‘废’话的Z又回来了,欢迎来到Super IT曾的博客时间,上一节说了字符串,面向对象以及json的知识,这一节我们继续我们知识的海洋,一起奋斗不秃头!不足的欢迎提问留言。
      在这里插入图片描述
      我发誓我真的没有P图😂,没想到这个系列被小编看上了,从发布这个系列起就都上热门了,怪害羞的,哈哈让人老脸一红的既视感,既然如此!我会认真把这个系列做完的,然后带你们搞项目搞框架!我们一起搞事情!那现在我们就开始吧!这一节是es6结局哦,下节就要说es789…的啦哈哈哈。
      在这里插入图片描述

    9.0 Promise

    • 老曾英语教学开始,promise是什么,是承诺,我可是一言九鼎的人啊,别说四匹马,四十匹马都拉不回来我,那么解释起来promise就是这件事我肯定会做,至于多久做嘛~反正肯定会做的对吧!那么promise和我们es6有什么关系呢?我们先卖个关子。
    • 这里就要先提到两个东西了,相信有一定基础的小伙伴一定知道我想说啥,对就是异步和同步。
    两步特点1特点2
    异步操作之间没啥关系,可同时进行多个操作代码更复杂
    同步同时只能做一件事代码简单

    那么你肯定又想问异步和同步项目中怎么应用的?我拿它来干嘛?我打个比方:
    在这里插入图片描述
    这里的图片数据文字数据等等都不是写死的吧,都需要从后台去拿,如果你使用异步,这时候就好比这种代码,也叫回调地狱,这种好吓人哦,要是上百条数据上千条那怎么遭得住,不知道你们遭得住不,反正我是遭不住。

    //callback-hell 回调地狱
    getFileContent('a.json',data => {
        console.log("data",data)
        getFileContent(data.next, data2 =>{
            console.log('data2',data2)
            getFileContent(data2.next, data3 =>{
                console.log('data3',data3)
            })
        })
    })
    

    这个时候就要请出我们的Promise了,它的作用就是用来消除异步操作,它具体是怎么的呢?一句话概括:

    • 用同步的方式,书写异步的代码

    9.1 Promise到底怎么用

    • 我们以一个ajax示例来看,你说你不知道ajax怎么办,没关系,你跟着看,以我对你的了解你看得懂哈哈,至少不影响代码阅读,跟着看了之后,回头自己个儿再看一下ajax教程你就完全懂了,废话暂时到这,先看目录结构:
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    • 现在,问题来了,我要在index里面ajax请求这两个json文件,成功打印出里面json内容,失败则弹出失败,想想怎么做?提示一点,Promise.all的使用:
      在这里插入图片描述
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
       	<script>
       		let p1 = new Promise((resolve, reject) =>{
       			//异步代码
       			$.ajax({
       				url: 'dataA.text',
       				dataType: 'json',
       				success(arr) {
       					resolve(arr)
       				},
       				error(err) {
       					reject(err)
       				}
       			})
       		})
       		
       		let p2 = new Promise((resolve, reject) =>{
       			$.ajax({
       				url: 'dataB.text',
       				dataType: 'json',
       				success(arr) {
       					resolve(arr)
       				},
       				error(err) {
       					reject(err)
       				}
       			})
       		})
       		
       		Promise.all([
       			p1,p2
       		]).then((arr) =>{
       			let [resA,resB] = arr
       			alert("all success")
       			console.log(resA,resB)
       		},(err) =>{
       			alert("fails")
       			console.log(err)
       		})
       	</script>
    

    光看代码有没有理解一点呢,别急代码会继续优化,我们先来解析代码,使用箭头函数和解构赋值的地方都是我们前面博客说过的咯,忘记的童鞋就自己翻看一下老曾之前的博文啦,当然我也是贴心大暖男,放图来给你注释解析:

    • 有道翻译 resolve–解决了,reject–拒绝了
    • 那拿到我们这里就明明白白了,resolve成功,reject失败
      图一,对应请求成功失败的执行以及返回:
      在这里插入图片描述
    • Promise对应成功失败的执行以及返回,绿字对绿框,紫字对紫框,红字对红框,顺便一提,无论是请求或是什么,有失败的函数一定要执行养成良好的习惯,我之前就不爱写失败的返回,蜜汁自信有没有哈哈哈,就会导致有时候不知道错误原因。
      在这里插入图片描述
      这样我怕你还不知道p1,p2,我给你打印一下可好?😋毕竟自己的粉自己疼p1,p2,console的代码中间有个逗号哈,只不过被线遮住了,看图就发现是promise对象:
      在这里插入图片描述
      现在来简化代码,我说过,我是个懒人,虽说p1和p2直接ctrl c+ctrl v再改改一个字母代码就好了,但我都懒得复制粘贴,两大坨代码看着就emm那啥,我们一个函数封装一下嘛:
    <script>
    	function createPromise(url){
    		return new Promise((resolve, reject) =>{
    			$.ajax({
    				url: url,
    				dataType: 'json',
    				success(arr) {
    					resolve(arr)
    				},
    				error(err) {
    					reject(err)
    				}
    			})
    
    		})
    	}
    	let p1 = createPromise("dataA.text")
    	let p2 = createPromise("dataB.text")
    	Promise.all([
    		p1,p2
    	]).then((arr) =>{
    		let [resA,resB] = arr
    		alert("all success")
    		console.log(resA,resB)
    	},(err) =>{
    		alert("fails")
    		console.log(err)
    	})
    </script>
    

    这样就清爽的多了有没有,当然这远远不够,你还能像到更优化的吗?不能的话就跟着来,看看代码打印出啥?

    let p = $.ajax({url:'dataA.text',dataTape:'json'})
    console.log(p)
    

    在这里插入图片描述
    发现没jQuery返回的本身就有promise对象,所以我们不用自己用p1,p2接收一个promise,现在直接用就好了:

    <script>
    	Promise.all([
    		$.ajax({url:"dataA.text",dataType:'json'}),
    		$.ajax({url:'dataB.text',dataTape:'json'})	
    	]).then((arr) =>{
    		console.log("success",arr)
    	},(err) =>{
    		console.log('fail',err)
    	})
    </script>
    

    这样是不是爽多了有没有!!!!
    在这里插入图片描述

    • 这才是Promise的完美用法,Promise.all是必须全部成功才执行成功,更像‘与’有没有,这里我们提一下另外一个,Promise.race,这个的话意思就是那个来了就先执行哪个,有一个成功都会执行成功的函数。

    10.0 generator

    10.1 generator的基本功能

    • 这是个啥?英语不好不存在哇搜一搜,翻译过来就是生成器。那这个有啥用?通俗易懂的来对比一下。
    • 普通函数:一路到底 —— 高铁火车
    • generator函数:随叫随停 —— 出租车
      那么我们就来看看这个generator和普通函数有啥不同?瞅瞅看打印出来是啥?猜猜?说实话我最开始也不知道哈哈哈😄,这里提示一下yield翻译过来是放弃的意思,我们这里把他理解为暂时放弃。
    <script>
    	function *show(){
    		alert('a');
    		yield;
    		alert('b')
    	}
    	show()
    </script>
    

    你是不是觉得会弹出一个a,没想到吧,啥也没有,控制台也不报错,这时候咋办呢?alert(show()),同时console.log(show())一下,查看一下呢?
    在这里插入图片描述
    alert出来的倒没啥,就告诉你执行出来是个生成器对象,但是当我们看他里面的时候就会发现里面有一个next方法,这个就很重要了。
    在这里插入图片描述
    那我们就来show().next();执行一下看看是个啥?
    在这里插入图片描述
    那如果既要显示a又要显示b呢?我们试试这样写:

    	let obj = show()
    	obj.next();
    	obj.next();
    

    在这里插入图片描述
    这样a,b就都出来了,这里只放了b,所以next给人的感觉就是踹一步走一下的感觉对吧。那你要问老曾老曾这个generator的原理是怎么实现走走停停的呢?你猜我给你说不说哈哈,当然要说。

    • generator的基本原理在这里就是把原来的*show()函数划分为了两个小函数,当然你是看不见的,这里就相当于划分为了show1和show2,各自执行alert(‘a’)和alert(‘b’)。

    10.2 细说yield

    yield传参

    • 上一个小点我们刚说了,yield是暂时放弃的意思,同时也对Promise有了一个基本的了解,那来看看这段代码你能猜对执行结果嘛?
    <script>
    	function *show(){
    		alert('a');
    		let a = yield;
    		alert('b');
    		alert(a);
    	}
    	let gen = show();
    	gen.next(12);
    	gen.next(5);
    </script>
    

    在这里插入图片描述
    在这里插入图片描述
    注意重点来了!
    在这里插入图片描述
    5???有没有怀疑人生?哈哈我很懵逼啊表示,来来来我们来分析一下两个next分别执行的是*show的哪两段代码:

    在这里插入图片描述
    第一次next是不是应该是白框框的代码,碰到yield暂停了嘛,第二次next就是黄框框的代码。所以gen.next(5);是给谁传递的值,看黄框框,是不是就是给let a传递的值,这样不难理解吧。

    • 那你说如果想给上面白框框alert值怎么办?
    function *show(num1,num2){
    		alert(`${num1} ${num2}`)
    		alert('a');
    		
    		let a = yield;
    		
    		alert('b');
    		alert(a)
    
    下一篇:没有了