00:00
我们再来看一个非常重要的promise,它呢是来优化我们的异步操作,首先呢,我们来想象一个场景,我在这呢创建了一个文件夹,这里写了几个接S文件,第一个JS文件呢,封装了一个用户信息,它的名字,密码以及它的用户ID。第二个呢,我封装了一个课程信息,这是十号课程,叫Chinese的语文,我们再来封装了一个课程的得分信息,我们这个ID是100分呢,这是90,我们现在呢,假设这么一个场景,首先呢我们查出当前用户的信息,诶,那我们发一个AJS请求查出当前这个用户信息,当然我们就不过服务器了,就直接请求这个接省数据。查到用户信息以后呢,当前用户有一个用户ID,它是一号用户,然后呢,再查出当前用户学习的课程,那么呢,我们再来发一个请求,来到user cos1,这一就代表一号用户的课程,二呢,就代表二号。
01:00
个用户的课程,我来模拟一下,好查出他的课程,这有一个Chinese,然后呢,再查出当前课程它的得分,那我们呢就继续来发请求,当天课程呢是十号课程来发一个course score10,那么十号课程的得分呢是90分,我们现在呢,有这么一系列操作,如果像我们以前用AJ来做,我在这呢导入了一个杰克瑞,我们可能呢是这么来做的,我把这个文件来说一下,首先呢,发一个AJ请求,成功了以后,执行我们这个方法失败了,执行这个方法,那么我们第一个请求就是先来请求出当前的用户信息,那如果成功了,我再按照当前用户的ID找到他的选修课程,我们来展开,假设呢,现在是成功了,我在这儿打印查询到的用户,诶,这是一个数据,那如果成功了呢,查询到用户就是这么一个数据,我还想要查询到用户的课程那。
02:00
那我们这个用户的ID是一,所以呢,我们就需要再发一个请求。再发一个请求呢,我们还去来查用户的课程啊,User cos用户的课程,哪一个用户的课程呢,这一块要按照用户的ID来,那基于上一步我查出的用户数据,拿到他的ID,然后呢,我们来请求这个方法,那这个请求如果成功了,相当于查到用户的课程,好,我们点开success。那如果成功呢,我们就能查到课程,那查到课程以后呢,我们还想要他的分数,比如查到课程,课程呢是十号,那接下来呢,我们就要再次来请求。再次来请求,我们这个叫课程的分数,我们这个拿到上一次查到课程的ID,再来进行请求,如果成功了,我们在这打印一下查询到的分数信息,那么以前呢,我们来做这一堆操作,我们发现是一个非常复杂的嵌套查询,我们这种无线嵌套的方式呢,总让人感觉到非常的乱,不工整,那么希望呢,有一种操作能把他们重新编排一下,让我们感觉到这些操作的顺序性,逻辑性,ES6呢就为我们提供了promise功能,当我们再来演示promise之前,先来看一下它的运行效果,来open with live server f12打开控制台,我们在控制台里边我们看到,诶,我们的第一步先查询出用户,用户呢是一号用户,然后呢,我们第二步又会发送请求,诶,我们来看一下发送的这些请求,那先给user Jason查询用户一号用户这些张三,然后呢,我们再来发请求,叫user cos1,我们来查到。
03:39
他的课程最后呢,根据课程的ID,再发送咱们这个课程十号课程查询出他的得分效果呢,虽然没问题,但是我们还是需要一些优化,我们来说一下这个promise,首先呢,我们这个promise它是用来封装异步操作的promise可以封装。异步操作它是怎么个语法格式呢?比如我们let p等于先要又一个promise,好在这个promise里边呢,我们可以传一个函数,好这个函数呢有一个非常大的特点,它呢能写两个参数,那么这两个参数呢?啊,比如叫resolve和reject,这两个参数分别代表我们操作成功了以后却来解析数据,操作失败了以后去来拒绝,所以呢,接下来我们在这里里边可以来翻翻题,里边来写异步操作,那当我们这个异步操作我们自个判断成功了,比如我们这个异步操作成功了,而且这个异步操作呢,可能会给我们返回一个数据,我们下一步还要用,那我们就可以调用resolve方法,把这个异操作刚才返回的数据给我们往下传,如果这个异步操作失败了,那我们就可以调用reject方法。我们。
04:59
告诉他这个拒绝了,诶当然这个reject,我们这个异步的异常之类的,我们也可以往下传,当然我们在这里来封装一下,就应该是这样子的,我们这一步操作呢,是一个Ajax,所以我来写一个dollar.ajax请求,我们想要做的第一件事是给user发请求,好,我们就叫user Mo user杰森。
05:25
好,我们给这发请求,然后呢,如果成功了,我们拿到成功的回调函数来,我们直接在这写CI冒泡function,好,如果成功呢,会有返回数据,那以前嵌泡写法呢,我们是成功了以后在这继续发请求,现在不用了,我们来这样一写,叫resolve data,然后呢,如果成功了,我们这个数据呢,返回给promise,让promise可以进行后续操作,那如果失败了,Error,我们可以这么来写function,当然失败也有一些失败信息。
06:03
哎,我们ER有什么失败信息呢?我们可以继续往下把失败信息传递过去,当传递失败呢,是用reject的方法,我这个呢,稍微一改造变成这样子,那这样子的意思呢,就是发一个异步请求,成功了这么来做,失败了这么来做,关键这个异步请求完了以后,我们要继续调用方法,接下来该怎么做呢?我们可以这么来写好这个P呢,是一个promise和P点,它有一个呢叫then then呢就是我们这个promise操作成功,成功以后呢,会调用这个result,把data给我们传下来,那接下来呢,我们想要在成功以后干某件事,那好,我们来写一个回调,这一块呢,我们可以接收一个对象,这个对象呢,其实就是上一步给我们reserve传下来的对象,好,这块就是成功了,当然失败了怎么办?我们还可以catch,失败了以后呢,上一步还会用reject给我们传来一个对象,我们还是可以。
07:04
你继续这么来写,好,失败了来做这个活,好那我们来写一下,这我们在控制台打印下console.log,这是我们第一步查询用户成功,成功的用户信息是什么?我们在这儿打印一下,就是返回到这个data,然后呢,成功以后我们继续往下走来,我们调用resolve,相当于往下传,当然我们想要成功以后干某件事,那就得p.ZZ呢会自动把reserve里边的东西接收来,这块呢就能得到上一步成功的这个用户,得到这个用户呢,我们还想要用户的这个课程,所以我们相当于是继续来发,那我们dollar.aja继续来发请求,这个请求呢,我还是把这一堆复制来,复制来,我们来修改一下,当用户查询成功了以后呢,该查当前用户的课程,好,我们把这个URL呢重新写一下。
08:04
我们来写标号,好,我们现在呢,还是给Mo文件夹下发请求,我来查用户的课程user course杠,哪个用户ID呢?我们可以Dollar符大括号来取出来,这个object是上一步查出来给我们reserve传下来的,那么就是object.id因为我们查询到的这个用户信息里边有一个ID,这是当前用户,好查到当前用户的这个课程信息,查成功了以后呢,我们先把这两个。删掉,我们先来在这儿测试一下,查询用户课程成功。成功的数据呢,我们展示一下,我们保存一下,我们先来看我们的控制台,控制台呢,我们看到我们把前边的这个aja来给大家助调先,好,我们再来看一下控制台,诶我们发现控制台呢,首先查询用户成功ID是一,然后呢,再发了一个请求查询用户的课程成功,那课程成功了以后呢,还要查这个课程的得分,那这个怎么查呢?我们说这个P啊,点是我们这个promise对象,相当于拥有的方法,所以呢,我们这里边是一个异步,我们还可以将这个异步继续包装成promise,比如我们来new一个promise,这个promise呢,同样的我们来传一个函数,然后呢,同样我们来写resolve reject。
09:34
写两个参数,然后呢,我们将我们的异步封装到这里,Out shift f代码整理一下,我封装到这里以后呢,只要是成功了,我们这有成功了,我们都可以调用resolve,将数据呢继续往下传,Resolve呢,我们将我们这个data继续往下传,那失败了呢,都可以调reject,那继续往下传B相当于是呢,我们这个p.Z这是一个promise,我们将这个promise再返回,然后呢,我们这个Z调完以后呢,还会返回一个promise对象,那promise对象呢就可以继续点。
10:13
哎,我们在这继续点Z,那么继续呢,给它干活好,我们来箭头函数,这个Z呢,我在这里边接收的data塔,相当于呢,就是这一步再往我们这传来的data,我们可以console log点看一下上一步的结果,这个结果呢,我们来打印一下这个data我保存,保存呢,我们来看一下我们这个控制台,诶我们发现呢,上一步的结果10CHINESE已经拿到了,那我们基于这个结果呢,我们还想要查询,那还想要查询呢,我们接下来继续来写aja X,如果我们这个Ajax操作完了以后还想要干事,那我们就应该将这个异步封装为promise给他返回,然后呢,我们无限给他ZZZZZ,每一步干完以后再干什么好,我们将这个呢,Aja我来复制过来看完整效果。
11:08
现在呢,由于我们最后一次的AJ已经不需要干什么活了,所以我可以不用将这个AJ封装到promise里边,好我们最后一个呢,我们是查询课程的得分,好课程的score得分,然后呢,到底是哪个课程呢?我们把data里边的IID返回到课程的ID,拿来我们查询课程。得得分成功,我们来保存一下,看一下最终效果,诶我们发现呢,首先查询用户成功,然后then呢,我们会看到用户查完以后,我们初始的promise,这是查用户,查完以后呢,我们调用then继续来查我们这个课程,课程完了以后呢,我们再then继续来查我们课程得分。比如呢,这个东西看起来虽然没有比AJ简化多少,但是呢,这是一个我们人类思考的合理化流程方式,诶一个干完了再来干一个,再来干一个,再来干一个,每一个这一个结果都是上一步得来的,我们使用result继续往下传,当然这个呢,看起来还是很复杂,们可以来抽取一下,比如呢,我这声明了一个方法,这个方法呢,我们全部抽取出来,这个get,那就是发请求方法,你要给谁发请求,带什么参数好,那么抽取这么一个方法,这个方法呢,我们用new promise1封装好这个new。
12:34
不promise呢,可以给它来封装一个异步操作,好我们来箭头函数给它封装一个异步操作,那么最终呢,将这个PROMISE1返回,因为promise对象呢,如果这个方法调完返回一个promise对象,可以点z.Z来做事,那我现在呢,再来重新把它优化一下,我们这个promise里边呢,还是传resolve么?将我们这个方法呢抽取出来,我在这里边呢,来帮我们来做异步请求,好AJS呢,同样我把这些都拿来我们的URL地址,那就是这一块传来的。
13:11
然后呢,我们的成功的回调,那成功了以后呢,我们就result继续往下走,失败以后呢就reject,然后呢,包括我们发送数据的时候要用的data,我们也可以传过来,好,我现在呢,在这抽取了一个Ajax操作,它是用promise封装的一步,那有了这个操作我可以以后怎么做,我们可以这么来做,那上边的全部方法我们就写成这样了,首先get,我发一个get请求,我发给哪呢?我先第一步请求Mo Mo下的user点杰S,我先拿到我的当前用户,拿到它以后,它干成了,我们点Z,然后呢,由于我们这个get方法封装的是promise,所以说呢,我们可以调点赞,就是呢,当这个方法成功了以后,第一个方法成功了以后呢,我们来做一件事,做什么事呢?相当我们要继续来发请求。
14:12
所以呢,我们来封装一下,成功以后呢,我们能达到上一步的结果,那我要继续给第二步发请求,我继续调get get呢,我们给谁发请求,我们来写上地址来我们用票号,因为我们要动态取值,Mo下的我们现在呢叫user-Co杠几呢,那就是返回到这个数据里边的用户ID data.ad点解S,这是我们做的第二步,当然这个第二步呢,我们还要继续往下做,这个get呢,封装的是一个promise,所以呢,我们继续把这个get return当我们这个第一步做完以后呢,做第二步。哎,我们在第一第二步这批注一下,我们直接在控制台打印吧,consl.log我们就叫用户查询成功,诶查询成功的数据我们在这一打印data,那相当于呢,即将来查询我们的这个课程,那我如果继续点赞。
15:17
点Z,那就现在呢,就是课程查询成功,我们要继续往下走,好,我们把这个data呢继续拿过来,我们在这儿auto shift f代码整理一下,那接下来呢,能走到这一步,那就是课程查询成功,课程查询成功,这个课程查询成功呢们接下来要查成绩,所以呢,我们继续get get呢,我们要去哪个地址好,还是票号,我们Mo下的,我们要查我们这个课程course的school课程的得分,那课程的ID是多少,那这个返回的课程信息你取出来Dollar大括号data.ad点杰S,那相当于又给这来发请求,同样呢,这也是一个promise,如果这个一切都成功了,我们还可以继续填S。
16:13
好,如果还有什么事要做,那我们就可以在这儿来data,这儿呢是查询课程查询成功了呢,我们当然要打印课程的信息了,接下来就来课程成绩查询成功,把这个成绩呢在这一打印,当整个有任何异常都可以在这点catch有任何问题呢,我们就在这诶模拟一下ER。把这个问题呢,就可以在这打印一下,我们就说这个出现异常,异常的原因呢,给这一写好,这就是呢,我们封装的这个方法,一看这个封装的方法呢,其实挺合理的,我先做第一步then做第二步,再then做第三步then第四步,然后呢,如果有什么异常我们来处理,就是说呢,一步一步整下来,我把上边的这个注调,我们把上边这些住调,我们来可以来测试一下我们下边的方法,我们来看控制台,首先呢,用户查询成功,诶我们在这儿有,诶我们新的方法,我们打上波浪线,我们跟以前呢识别一下,保存好,用户查询成功,查到了用户继续课程查询成功,查到课程继续成绩查询成功查到了成绩,这就是我们promise的这个操作,那后来呢,会经常用到promise。大家呢,现在可以理解一下这。
17:43
种操作方式,也就是说呢,用promise来封装我们的异步操作,然后呢,用resolve将成功操作继续往下传,用reject将失败操作继续往下传,我们可以用这种链式调用的方式重新来编排我们的异步操作。
我来说两句