Promise是什么

Promise 对象用于异步计算.

一个Promise表示一个现在、将来或永不可能可用的值.

按照用途来解释

1.主要用于异步计算

2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果

3.可以在对象之间传递和操作Promise,帮助我们处理队列.

回调有四个问题

1.嵌套层次很深,难以维护

2.无法正常使用return 和throw

3.无法正常检索堆栈信息

4.多个回调之间难以建立联系

new Promise(

    /*  执行器 executor  */

    function (resolve, reject) {

        // 一段耗时很长的异步操作

        resolve();  //数据处理完成

        reject(); //数据处理出错

    }

)

    .then(function  A() {

        //成功,下一步

    }, function B() {

        //失败,做相应处理

});

Promise详解

1.Promise是一个代理对象,它和原先要进行的操作并无关系.

2.它通过引入一个回调,避免更多的回调.

Promise有3个状态

    1. pending[待定] 初始状态

    2.fulfilled[实现] 操作成功

    3.rejected[被否决] 操作失败

Promise 状态发生改变,就会触发.then()里的响应函数处理后续步骤.

Promise 状态一经改变,不会再变.

Promise 实例一经创建,执行器立即执行.

Promise执行顺序

简单demo-1

console.log('here we go');

new Promise(resolve => {

setTimeout(() => {

resolve('hello');

},2000);

})

.then(value => {

console.log(value +' world');

});

简单demo-2

console.log('here we go');

new Promise(resolve => {

setTimeout(() => {

resolve('hello');

},2000);

})

.then( value => {

console.log(value);

return new Promise(resolve => {

setTimeout(() => {

resolve('world')

},2000);

});

})

.then( value => {

console.log( value +' world');

})

假如一个Promise已经完成了,再.then()会怎样?

console.log('start');

let promise =new Promise(resolve => {

setTimeout(() => {

console.log('the promise fulfilled');

resolve('hello, world');

},1000);

});

setTimeout(() => {

promise.then( value => {

console.log(value)

});

},3000);


.then

1.   .then()接受两个函数作为参数,分别代表fulfilled 和 rejected

2.   .then()返回一个新的Promise实例,所以它可以链式调用

3.   当前面的Promise状态改变时, .then()根据其最终状态,选          择特定的状态响应函数执行

4.   状态响应函数可以返回新的Promise,或其它值

5.   如果返回新的Promise, 那么下一级 .then()会在新Promise状        态改变之后执行

6.    如果返回其它任何值,则会立刻执行下一级 .then()


.then()里有 .then() 的情况

1. 因为.then() 返回的还是Promise实例

2. 会等里面的 .then()执行完,在执行外面的

3.对于我们来说,此时最好将其展开,会更好读

简单demo_3(没展开)

console.log('start');

new Promise( resolve => {

    console.log('Step 1');

    setTimeout(() => {

        resolve(100);

   },1000);

})

.then( value => {

    return new Promise(resolve => {

        console.log('Step 1-1');

        setTimeout(() => {

            resolve(110);

        },1000);

    })

    .then( value => {

        console.log('Step 1-2');

        return value;

    })

    .then( value => {

        console.log('Step 1-3');

        return value;

    });

})

.then(value => {

    console.log(value);

    console.log('Step 2');

})

结果

start

Step 1

Step 1-1

Step 1-2

Step 1-3

110

Step 2

简单demo_3(展开后)

console.log('start');

new Promise( resolve => {

    console.log('Step 1');

    setTimeout(() => {

        resolve(100);

    },1000);

})

.then( value => {

    return new Promise(resolve => {

        console.log('Step 1-1');

        setTimeout(() => {

            resolve(110);

        },1000);

    })

})

.then( value => {

    console.log('Step 1-2');

    return value;

})

.then( value => {

    console.log('Step 1-3');

    return value;

})

.then(value => {

    console.log(value);

    console.log('Step 2');

})

结果一样

错误处理

Promise 会自动捕获内部异常,并交给rejected响应函数处理

错误处理的两种做法:

1.reject('错误信息').then(null, message => {})

2.throw new Error('错误信息').catch( message => {})

推荐使用第二种,更加清晰好读,并且可以捕获前面的错误

注意:

强烈建议在所有队列最后都加上.catch(),以避免漏洞错误处理造成意想不到的问题


Promise.all()

批量执行

1.Promise.all([p1, p2, p3, ...])用于将多个Promise实例,包装成一个新的Promise实例

2.返回的实例就是普通 Promise

3.它接受一个数组作为参数

4.数组里可以是Promise对象,也可以是别的值,只有Promise会等待状态改变。

5.当所有子Promise都完成,该Promise完成,返回值是全部值的数组

6.有任何一个失败,该Promise失败,返回值是第一个失败的子Promise的结果。 

简单demo

console.log('hero we go');

Promise.all([1,2,3])

.then( all => {

console.log('1', all);

return Promise.all([function () {

console.log('ooxx');

},'xxoo',false]);

})

.then( all => {

console.log('2: ', all);

let p1 =new Promise( resolve => {

setTimeout(() => {

resolve('I\'m P1');

},1500);

});

let p2 =new Promise( resolve => {

setTimeout(() => {

resolve('I\'m P2');

},1450);

});

return Promise.all([p1,p2]);

})

.then( all => {

console.log('3: ', all);

let p1 =new Promise( resolve => {

setTimeout(() => {

resolve('I\'m P1');

},1500);

});

let p2 =new Promise( (resolve, reject) => {

setTimeout(() => {

reject('I\'m P2');

},1000);

});

let p3 =new Promise( (resolve, reject) => {

setTimeout(() => {

reject('I\'m P3');

},3000);

});

return Promise.all([p1,p2,p3]);

})

.then( all => {

console.log('all', all);

})

.catch( err => {

console.log('Catch: ', err);

});

结果:

hero we go

1 [ 1, 2, 3 ]

2:  [ [Function], 'xxoo', false ]

3:  [ 'I\'m P1', 'I\'m P2' ]

Catch:  I'm P2


Promise.all()最常见就是和.map()连用

Promise.resolve()

返回一个fulfilled的Promise实例,或原始Promise实例

1.参数为空,返回一个状态为fulfilled的Promise实例

2.参数是一个跟Promise无关的值,同上,不过fulfuilled响应函数会得到这个参数

3.参数为Promise实例,则返回该实例,不做任何修改

4.参数为thenable,立刻执行它的.then()

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

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,703评论 1 56
  • //本文内容起初摘抄于 阮一峰 作者的译文,用于记录和学习,建议观者移步于原文 概念: 所谓的Promise,...
    曾经过往阅读 1,235评论 0 7
  • Promise很复杂..恩..原来觉得不就是词法作用域吗, 原来觉得词法作用域不就是调用时的堆栈是定义时的嘛 结果...
    仧小张阅读 702评论 0 2
  • 前言 本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法。并在文末会附上一...
    _暮雨清秋_阅读 2,190评论 0 3
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,028评论 0 2