00:00
那接下来呢,我们来看一下promise的基本用法和使用的一个小例,那回到我们的代码当中,那之前我们这里把这个阿贾克斯的请求呢,做了一个马雅这样的一个封装,那封装完之后呢,我们觉得在使用的过程中呢,我们不断的去调用的话,会出现一种叫做回调地域的这种现象,那如何使用promise对它进行一个修改呢?其实也是非常简单的,首先呢,我们找到这个封装,那么在封装这里呢,我们先把之前写的这些代码呢,先给它收起来,那如何对这个封装进行一个promise的修改啊,非常的简单,我们只需要通过new promise的方式来去创建一个promise,那promise new的过程中呢,这里。
01:01
只需要传入一个函数的,那函数呢是有两个参数,那一会儿呢,我们再来说这两个参数分别代表什么含义,那紧接着呢,这个new promise是传入的函数里面,就可以去把我们刚刚写过的这些封装的内容呢,全部都拿到这个函数当中来,那么紧接着我们格式化一下代码之后呢,哎,其实呢,我们能够拿到这个promise对象了,那最终谁来去调用MY,那我们就把这个new完成之后的promise呢,给它去做一个return的返回就可以了。那么我们还有一个问题,当异步成功回调之后,那我们是通过调用回调函数,也就是call back的方式将异步返回的结果直接给我们啊,通过调用的方式传入实参来进行返回的这种方式,那么使用promise时呢,我们在前面的原理部分呢,也讲解过一个问题。
02:01
呃,讲解过一个内容,那这个内容呢,就是promise,它是一个叫承诺这样的一个含义,那么这样的一个含义所代表的是什么意思呢?就是说如果我给你去发送了或者是执行了这个异步操作呢,那么我当前的状态就是一个喷Ding的状态,而如果是执行成功,那么我一定会由这个pending的状态呢改为fulfilled,或者是改为rejected,那这两种状态呢,就代表了不同的两种处理方式,那这两种处理方式呢,分别就可以写在我们的这个异步成功和异步失败的地方,那么因此我们再去使用时呢,实际上这个回调函数就没有必要再去传了,那这两个方法怎么去做呢?诶,这就用到了我们函数当中的两个参数,那这两个参数的第一个参数呢,其实就是你成功状态是我要做的事情,那一般呢,我们会给它起一个叫做resolve这样的一个名字。那如果是失。
03:01
带的话呢,那我们就叫它reject就可以了,好,那成功时呢,哎,我们就自然而然的去调用这个result就可以,那调用时呢,哎,我们只需要把这个结果给它传入就可以了,那如果失败呢,也是一样,我们直接啊会把这个失败的信息呢也一样的给它传回,那么这个那呢,咱们就不需要了,那其实这样的修改完成之后啊,我们的一个promise也就用啊这个修改完了,那修改完成之后我们怎么去使用它呢?啊也是非常简单的,比如呢,现在我们在这个index al这里呢,再给它去做一个复制,那复制完成之后呢,我们做一个修改啊这里呢,我们就调用这样的一个方式,比如说里啊叫index下划线这个promise的方式,好,那依然通过send的点击按钮的方式,然后呢,引入我们这个index JS,那么当我们去发送这个请求时呢,诶,我们就可以去使用这样的。
04:01
这个方式来去给它做这个请求了,那如何去使用呢?我们把之前的代码呢,先删掉,这里呢,我们直接使用这个MY,好,那紧接着呢,我们还是啊去调用它,那调用它呢,我们知道最终呢,会给我们有一个promise对象这样的一个结果的返回,那返回之后呢,我们说要请求的地址呢,其实和我们刚刚所说的是一样的,直接呢,还是使用HTTP冒号双斜杠啊127.0.0.1,然后呢,来一个斜杠8001啊这样的方式来去发送这个请求就可以了,那请求之后我们怎么拿到结果呢?哎,我们知道啊,在封装时呢,这里会有一个我们的result以及reject的调用,分别对应了成功和失败,那这个成功和失败怎么在我们当前的这个啊调用时去使用呢,那我们就可以使用后面的一个叫做Z这样。
05:01
的方法,那点Z方法呢,它接收两个参数,一个就是我们的成功时的回调函数,那另外一个呢,就是失败时的回调函数了,那所以呢,我们把这两个内容呢,先写到这里,好写到这里之后啊,那成功时的回调函数呢,必然要传入值的,所以这里呢,我们也通过这的方式来去接受,那如果失败时呢,诶依然通过L的方式来去接受,那此时呢,我们就可以把这个代码呢,诶给他用这样的方式来去写啊,这样看起来呢,会更加的方便一些,那么我们也不做其他的操作,直接呢使用consoular log的方式呢,把这个date腾出来,那如果出现了错误呢,也是一样,我们通过conso里log的方式把我们的这个error呢打印出来,那此时呢,我们就可以打开我们的浏览器来去运行我们当前的这个代码,来我们去做一个查看,好,那紧接着呢,我们点开这个检查,然后找到CR里,那此时呢,我就可以去。
06:01
使用这个按钮来去点击了,那当我一点击,诶我们发现啊啊这里呢会出现一个错误,那错误呢,其实这里就是我们刚刚看到的那个报错的信息了,报错信息告诉我们什么呢?说这个12720001的这个8001这个端口呢,没有打开啊,那么因此呢,我们还需要做一件事情啊,就是刚刚呢,我的服务器是关掉的,那么现在呢,我在通过这个命令行的方式呢,把我的服务器呢在启动好,那么打开我的这个写好的服务器,我呢这里呢就直接去执行noma,然后呢,去执行当前这个路径下的啊,我准备好的这个服务器的相关内容,好,那么现在呢,这个8001这个端口呢,服务器呢就已经启动成功了,那么接着呢,我们再一次的去做尝试,好,那现在呢,我们就能够看到说老师祝你早日富可敌国。那此时呢,我们就。
07:01
能够通过promise的方式来去对我们阿里克斯的异步请求呢,做了一个修改,那当前就是我们修改好的这个相关内容了,那么现在我们能够看到的是使用点Z的这种方式,那回到我们最开始的那个需求上来,如果当前的请求成功了,那我就需要根据当前的这个业务呢,去发送下一次的请求,那我们知道当前成功呢,是在点Z里面去使用的,那所以呢,我们是不是也要在这里再一次的使用这个MYS的方式来去请求呢?你比如像这样的一个方式啊,那我们直接把这个地址呢给它拿过来啊,我们复制一下,把这行代码呢拿过来,那后面呢,我们可以加上一个比如叫宋词,如果你用这样的方式去请求呢,你会发现你即使是使用了promise,那么依然会陷入到一个什么呢?叫做毁掉地狱的这个窘境当中啊,为什么呢?因为你。
08:01
依然是一层套一层的这种结果,那它能不能行呢?啊,当然是可以的,比如呢,我们还是使用这个date,然后最后呢,还是使用这个conso log的方式,把date呢也打印出来,那回到我们的浏览器中呢,哎,我们刷新一下,然后呢再点击,那么此时呢,你就能够看到,诶,我们又把这个宋词的一个数据打印出来了,这是完全没有问题的,但是这样的使用方式实际上和我们使用回调函数的方式没有任何的方呃区别,它依然会陷入到一个毁掉地狱的这个窘境当中,那正确的使用promise的方式是怎样的呢?哎,请注意,当你使用promise时,说我下一个请求的任务或者下一个要执行的任务是依赖于前面的执行任务的时候,那么就不要在你里面去写了,那这个时候你说我需要怎么去做呢?诶注意啊,你在成功时发送或者叫调用这个玛A。
09:01
Jack是没有错的,但是呢,你就不用在后面直接去点Z了,你你要做的事情是什么呢?是在前面这一次发送或者叫调用时呢,直接把这个调用的结果呢,给它return回去,那么return回去的含义呢,就意味着你点Z的这个调用呢,最终依然会拿到my promise调用之后给我们返回的那个promise对象,那既然拿到这个promise对象呢,其实就和前面的这个调用呢没有任何的区别了,那么有了这个内容之后呢,我们就可以直接在后面继续使用点Z的这个方式来去接收我们的请求啊,来去接收我们的异步响应的数据,比如这里呢,我们依然使用log,然后呢去给它打印,好稍等一下,那这里呢,啊,这应该是箭头函数啊,OK,好,那么这个写好之后呢,其实就是一样的了,那我们把前面的这个。
10:01
打印呢,也给它拿出来,再回到我们的浏览器当中,我们再一次的去刷新,那么现在你就能够看到,哎,两个呢也都出来了,那这样的方式就比较优雅一些,它优雅的点在于你只要是有下一次请求的,你依然可以在这里再一次的,比如我现在呢,再把这个复制一下,那再回过头来,那我再换一个,比如像情诗啊,返回之后呢,你想下一次呢,再去处理的话,你依然可以再后面进行一个点Z这样的方式进行处理,那它呢,就会出现这样的情况,比如呢,我们把后面这个点子呢,哎,像刚才一样,再来一个空格,那写到这里,那如果下面再有呢,我们依然可以再一次的去使用这样的方式,那这样的代码呢,你会发现它就没有陷入到我们所谓的回掉地狱的这个窘精当中,那此时的代码就会出现从上往下一次执行的这种结果,但是注意啊,这样的结果呢,仅仅只是看起来,为什么呢?因为。
11:01
点的方式依然要强烈的依赖于前面的这个调用,那只不过写法上呢,我们就会感觉,诶,好像没有陷入到毁掉地狱当中,但是呢,有一个问题在于,我们确实脱离了回调地域,那点Z的这种链式调用呢,其实是不太友好的,因为如果你的代码过多,或者业务逻辑足够复杂的情况下,那么就会让我们产生非常非常多的点Z,那也就是说,其实promise这种写法目前的使用方式,它只是将我们的回调函数进行了改进,那异步的执行呢,哎,看起来啊,其实呢,也并没有什么太多的新意。而promise最大的问题呢,就是在于它的代码在使用时是非常冗余的,原来的任务呢,只不过是被我们的promise做了一层的包装,那不管什么操作,你一眼看上去。在使用时一。
12:01
依然是一堆一堆的点Z,那原来的语义呢,其实变得就更加的不清晰了,所以呢,哎,在promise的基础上,那更加优雅的使用异步的这种方式叫做a think函数就出现了,那这也就是我们所说的终极的异步解决方案就千呼万唤使出来,在ES2017中发布了a think of it这个语法汤,那它是如何去使用的呢?
我来说两句