好程序员web前端培训分享如何讲清楚Promise?-阿里云开发者社区

开发者社区> 好程序员> 正文

好程序员web前端培训分享如何讲清楚Promise?

简介:
+关注继续查看

  好程序员web前端培训分享如何讲清楚Promise?此文章主要讲解核心思想和基本用法,想要了解更多细节全面的使用方式,请阅读官方API

  这篇文章假定你具备最基本的异步编程知识,例如知道什么是回调,知道什么是链式调用,同时具备最基本的单词量,例如page、user、promise、then、resovle、reject、pay、fix、order等等,如果你对这些单词非常陌生,那么你需要先花点时间补充一下你的英语

  什么是异步操作?

  所谓异步操作,指的是可以跟当前程序同时执行的操作。举例:

  $("#page").scrolltop(0 ,1000); //使用1秒钟时间将页面滚动至顶部

  $("#nav-float").hide (1000); //使用1秒钟时间将悬浮导航栏隐藏

  只要你稍微有点异步编程经验,就应该知道,这两个方法会同时完成。

  它们的编写顺序并不会影响它们的执行顺序

//异步操作的特点就是,不会打断当前程序的执行

//getUsers请求发出后,会立刻向下继续执行第二个请求

ajax("/getUsers",function(data) {

//回掉函数会在请求成功后调用

})

//resumelist请求会立刻开始,无论getUsers是否结束

ajax("/resumelist", function(data) {

})

//至于哪一个ajax先返回结果并执行回调函数,从代码的编写顺序上是无法确定的。

我们可以给异步操作做一个简单的定义

当一个操作开始执行后,主程序无需等待它的完成,可以继续向下执行。此时该操作可以跟主程序同时(并发)执行。这种操作我们就称之为异步操作。 通常当操作完成时,会执行一个我们事先设定好的回调函数来做后续的处理。

我们常见的异步操作例如:

添加定时器 setTimeout/setInterval

执行某个动画 animate

发起网络请求 request

异步会带来什么问题?

比如我们现在有两个动画,需要按顺序来执行,也就是第一个结束,第二个才能开始

这个时候可能有点麻烦,传统的解决方法是通过回调:

animateA(function( ){

  animateB( );  

})

这种方案显然不太好,如果有很多异步操作需要顺序执行,就会产生所谓的“回调地狱”

ajaxA(function( ){

ajaxB(function( ){

    ajaxC(function( ){

        ajaxD(function( ){

            ......   

        });

    });

});

})

这种代码不管是写起来还是读起来都比较烦人。

我们来看下经过Promise改造后的样子(伪代码)

new Promise(ajaxA)

    .then(ajaxB)

    .then(ajaxC)

    .then(ajaxD);  

Promise的使用及原理

要熟练Promise的的使用,你必须要先搞懂它解决问题的原理

贴一段实际的Promise代码,你来感受一下先:

newPromise(resolve=>{

ajax("/pay/post", data=>resolve() );

}).then(resolve=>{

ajax("/order/fix", data=>{

    //处理数据   

})

})

上面的代码使用了ES6的箭头函数,虽然大大简化了代码的写法,

但对于初级程序猿来讲极不友好

读这种代码简直跟读金刚经差不多。

我们把代码还原成ES5的样子

new Promise(function(resolve){

ajax("/pay/post",function(data){

    resolve();

})

}).then(function(){

ajax("/order/fix",function(data){
})

})

接下来,我们就按照费曼技巧来一步步的学习Promise是如何解决问题的

问题1, 作为一个异步函数,尤其像ajax这种网络请求,连我自己都不能确定函数的执行时间,Promise是怎么知道第一个函数什么时候结束的? 然后再开始执行下一个?

Promise并没有那么神奇,它并不能知道我们的函数什么时候结束,

你注意到上面代码中的第3行了吗

在ajax请求结束执行回调的时候,

我们调用了一个resolve()函数,这句代码非常的关键.

这其实就是在通知Promise,当前这个函数结束啦,

你可以开始执行下一个。 这时Promise就会去执行then里面的函数了。

问题2, 所以按照你的意思,如果我不调用这个方法,Promise就不知道这个函数有没有结束,那么then里面的函数就不会执行,也就是说我的第二个请求就永远不会发送了呗?

Bingo!! 恭喜你已经学会了逻辑推理+抢答。

问题3, 可是这个resolve函数是从哪来的? 需要我自己定义吗? 从代码上看它好像是个参数,那又是谁传入函数中的?

你得先弄明白Promise的基本结构

new Promise(函数1).then(函数2);

我们把函数1和函数2都以参数形式传给了一个Promise对象,

所以接下来函数1和2都会由这个Promise对象控制,

简单的说,函数1和函数2都会由Promise对象来执行。

所以在函数1执行时,参数也当然是由Promise对象传递进去的。

new Promise(function(resolve){

//resolve是Promise对象在调用函数时传入的参数

}).then(函数2);

问题4, Promise对象为啥要在执行第1个任务的时候,把这个resolve函数 传进来,有什么目的?

你说呢?

废屁,知道还用问你?

真是猪脑子,刚才不是已经说了吗?

Promise对象没办法知道我们的异步函数啥时候结束。

那我来问你, 如果你去车站接人,

可是你又不知道对方何时下车,你会咋办?

把我电话号码给他,快到了打我电话呗

没错,Promise解决问题也采用了同样的思路。

它传进来的resolve函数, 就好像一个对讲机,

当我们的异步任务要结束时,通过对讲机 来通知Promise对象。

也就是调用resolve方法

new Promise(function(resolve){

ajax("/pay/post",function(data){

    //当请求结束时,通过调用resolve方法,通知Promise对象,该任务已完成

    resolve(); //收到通知后,Promise会立刻开始函数2的执行

})

}).then(函数2);

懂了,所以这个resolve函数,必须在异步任务的最后调用(例如ajax的回调方法),相当于告诉Promise对象,该任务结束,请开始下一个。

完全正确

问题5, 所以Promise也不过如此嘛,它没有带来什么功能上的革命性变化, 因为使用传统的回调嵌套的方式,同样可以完成效果。 说白了它就是编码方式上的改进??

基本是这样的,但Promise带来的编码方式以及异步编程思路上的进步是非常巨大的。

问题6, 那如果我有ajaxA、ajaxB、ajaxC三个异步任务,想按照先A后B再C的顺序执行,像这样写行吗?

new Promise(function(resolve){

ajax("/AAA", function(){

    resolve(); //通知Promise该任务结束

})    

}).then(function(resolve){

ajax("/BBB", function(){

    resolve();//通知Promise该任务结束

})

}).then(function(){

ajax("/CCC", function(){ //.... })

})

上面的这种写法是不对的。

Promise的中文含义是“承诺”,

则意味着,每一个Pormise对象,代表一次承诺

而每一次承诺,只能保证一个任务的顺序,也就是说

new Promise(A).then(B); 这句话表示, 只能保证A和B的顺序

一旦A执行完,B开始后,这次承诺也就兑现了,Promise对象也就失效了

那如果还有C呢? 我们就必须在函数B中,

重新创建新的Promise对象,来完成下一个承诺,具体的写法就像这样:

new Promise(函数1(resolve){

ajaxA("xxxx", function(){

    resolve();//通知Promise该任务结束

})    

}).then(函数2(){

//在函数2开始运行后,第一次创建的Promise对象完成使命,已经不能再继续工作。

//此时,我们创建并返回了新的Promise对象

return new Promise(function(resolve){

    ajaxB("xxxx", function(){

        resolve();//通知新的Promise对象该任务结束

    })    

})

}).then(函数3(){ //尽管这里使用了链式调用,但负责执行函数3的,已经是新的Promise对象了

// 如果,我们还有ajaxD需要顺序调用

// 那就必须在这里重新new Promise()对象了

ajaxC("xxx", function(){     })

})

问题7, 懂了,那Promise还有什么其它强大的功能吗?

有啊,例如: 如果我有 A,B,C 三个异步任务,ABC同时开始执行

当A,B,C三个任务全部都结束时,执任务D,

传统方法实现起来就比较复杂,Promise就非常简单,就像这样:

Promise.all([new Promise(A), new Promise(B), new Promise(C)])

.then(function(){

D();

});

问题8, 那如果我希望A,B,C 其中任意一个任务完成,

就马上开始任务D,该怎么做?

Promise.race([new Promise(A), new Promise(B), new Promise(C)])

.then(function(){

D();

});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
周末分享:如何在一周内摸清一个行业
 在和咨询、投行、投资、猎头这些行业的人聊天的时候,我反复听到“一周”这个时间,于是我也开始好奇:你们是在什么情况下需要在一个星期之内了解一个行业?你们都是如何做到在一个星期之内摸清一个行业的? 在一周之内“摸清”一个行业依然不可能成为这个行业的顶尖专家,也不可能成为这个行业的一个高管。
742 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向(十二)
数据库逆向就是通过读取数据库物理表schema信息,然后生成表单元数据,可以看成“dbfirst”模式,即先有数据库表,然后根据表生成元数据,逆向表单后续操作和普通动态表单类似。本文主要介绍了数据库逆向功能,在数据库表单已经存在的基础上,通过数据库逆向功能,快速生成元数据,不需要一行代码,我们就可以得到已有数据库的基本crud功能,包括API和UI。类似于phpmyadmin等数据库UI管理系统,但是比数据库UI管理系统更灵活,更友好。
54 0
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容,隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
1292 0
好程序员教程分享webpack打包文件太大怎么办
好程序员教程分享webpack 打包文件太大怎么办,webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如HotModuleReplacementPlugin, NoErrorsPlugin复制代码这时候不管用什么优化方式,都没多大效果。
1700 0
+关注
333
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载