Promise简单使用

ES6原生提供了Promise对象。所谓Promise,就是Node中的一个对象,用来传递异步操作的消息。

Promise的特点
  1. 对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending、Resolved和Rejected。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,他的英语意思就是【承诺】,表示其他手段无法改变。
  2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变,会一直保持这个结果。就算改变已经发生了,你在对Promise对象添加回调函数,也会立即得到这个结果,这与实践(Event)完全不同,事件的特点是:如果你错过了它,再去监听,是得不到结果的。

Promise简单例子

创建一个Promise
var promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('执行完成');
        resolve('随便什么数据');
    }, 1500)
})

Promise的构造函数接收一个参数,就是一个函数,并传入两个参数:resolve、reject,分别表示异步操作执行成功后的回调函数和异步执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解,后面再细究概念。

上边的例子中,我们只是创建了一个Promise的对象,并没有调用它,然后我们来看下边的这个完整的例子:

function runAsync () {
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return promise;
}
runAsync();

这个时候你应该有两个疑问:1. 包装这么一个函数有什么用?2. resolve('随便什么数据');这个是干什么的?

接下来我们继续讲。在我们包装好的函数最后,会return出Promise对象,也就是说,执行这个函数我们得到了一个Promise对象。还记得Promise对象上有then、catch方法吧。这就是强大之处了,看下边的代码:

runAsync().then(function (data) {
    console.log(data);
    // 后边可以用传过来的数据来做一些其他操作
    // ......
});

在runAsync()的返回上直接调用then方法,then方法接收一个参数,是函数,并且会拿到我们在runAsync中调用resolve时传的参数。运行这段代码,会在两秒后输出“执行完成”,“随便什么数据”。

以上的例子中还不能很好的表现出Promise的强大之处,下面我们开始讲解链式操作

链式操作

首先看一个例子

function runAsync1(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('随便什么数据1');
        }, 1000);
    });
    return promise;
}
function runAsync2(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('随便什么数据2');
        }, 2000);
    });
    return promise;
}
function runAsync3(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务3执行完成');
            resolve('随便什么数据3');
        }, 2000);
    });
    return promise;
}
runAsync1()
    .then(function (data) {
        console.log(data);
        return runAsync2();
    })
    .then(function (data) {
        console.log(data);
        return runAsync3();
    })
    .then(function (data) {
        console.log(data);
    });

这段代码运行的结果是:

异步任务1执行完成
随便什么数据1
异步任务2执行完成
随便什么数据2
异步任务3执行完成
随便什么数据3

如果我们来把上班执行的代码改为这样:

runAsync1()
    .then(function (data) {
        console.log(data);
        return runAsync2();
    })
    .then(function (data) {
        console.log(data);
        return '直接返回数据';
    })
    .then(function (data) {
        console.log(data);
        done();
    });

这样执行完的结果就会变成:

异步任务1执行完成
随便什么数据1
异步任务2执行完成
随便什么数据2
直接返回数据

这里的原因自己慢慢体会吧!!!

reject的用法

到这里,你应该对Promise有了最基本的了解了。在ES6中除了resolve,还有reject这个功能。�事实上,我们前面的例子中都是只有“执行成功”的回调,还没有“失败”的情况,reject的作用就是把Promise的状态置为rejected,这样我们在then中就能捕捉到,然后执行“失败”情况的回调,看下面的代码:

function getNumber() {
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var num = Math.ceil(Math.random() * 10);
            if (num < 5) {
                resolve(num);
            } else {
                reject('数字太大了');
            }
        }, 1000);
    });
    return promise;
}
getNumber().then(
    function (data) {
        console.log('resolved');
        console.log(data);
    },
    function (reason, data) {
        console.log('rejected');
        console.log(reason);
    });

getNumber函数用来获取一个数字,1秒后执行完成,如果数字小于5,我们认为是“成功”了,调用resolve修改Promise的状态。否则我们就认为是“失败”了,调用reject并传递一个参数,作为失败的原因。

运行getNumber并且在then中传了两个参数,then方法可以接受两个参数,第一个对应resolve的回调,第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据,多次运行这段代码,你会随机到下面两种结果:

resolved
3
或者
rejected
数字太大了

catch的用法

我们知道Promise对象除了then方法,还有一个catch方法,他是做什么用的呢?其实它和then的第二个参数一样,用来指定reject的回调,用法是这样的:

getNumber()
    .then(function (data) {
        console.log('resolved');
        console.log(data);
    })
    .catch(function (reason) {
        console.log('rejected');
        console.log(reason);
    })

效果和写在then的第二个参数里边是一样的。不过它还有另一个作用:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常(代码出错),那么并不会报错卡死js,而是进到这个catch方法中。请看下面的代码:

getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
        console.log(somedata); //此处的somedata未定义
    })
    .catch(function(reason){
        console.log('rejected');
        console.log(reason);
    });

在resolve的回调中,我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise,代码运行到这里就直接在控制台报错了,不往下运行了。但是这里,我们会得到这样的结果:

resolved
4
rejected
[ReferenceError: somedata is not defined]

all的用法

Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数,看下面的例子:

Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function (results) {
        console.log(results);
    });

会打印:

异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
[ '随便什么数据1', '随便什么数据2', '随便什么数据3' ]

有了all,你就可以并行执行多个异步操作,并且在一个回调中处理所有返回数据,是不是很酷?有一个场景是很适合用这个的,一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源,比如图片、flash以及各种静态文件。所有的都加载完后,我们进行页面的初始化。

race的用法

all方法的效果实际上是【谁跑得慢,以谁为准执行回调】,那么相对的就有另一个方法【谁跑的快,以谁为准执行回调】,这就是race方法,这个词本来就是赛跑的意思。race的用法与all一样,我们把上面runAsync()的延时改为1秒来看一下:

Promise
    .race([runAsync1(), runAsync2(), runAsync3()])
    .then(function (results) {
        console.log(results);
    });

这个异步操作同样是并行执行的。1秒后runAsync已经执行完了,此时then里面的就执行了。结果是这样的:

异步任务1执行完成
随便什么数据1
异步任务2执行完成
异步任务3执行完成

这个时候runAsync2()和runAsync3()并没有停止,仍旧再执行。于是再过1秒后,输出了他们结束的标志。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,812评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,626评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,144评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,052评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,925评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,035评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,461评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,150评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,413评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,501评论 2 307
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,277评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,159评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,528评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,868评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,143评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,407评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,615评论 2 335

推荐阅读更多精彩内容