JavaScript Promise

浏览器支持

推荐使用Chrome以及Firefox浏览器

开局放图,忍不住吐槽一下----垃圾IE!!。

什么是Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Promise 对象表示异步操作的最终完成(或失败)及其结果值。也就是说他是异步编程的一种解决方案,它的好处在于,有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象还提供了一整套完整的接口,使得可以更加容易地控制异步操作。Promise对象的概念的详细解释,请参考《JavaScript标准参考教程》

构造函数

Promise 由关键字new以及其构造函数(executor function)进行创建。该处理函数会接收两个函数----resolve以及reject作为参数,当处理成功且返回结果时会调用resolve函数,反之当异步任务失败并返回失败原因时会调用reject函数。

const myPromise = new Promise((resolve,reject) =>{

    if(/*异步操作成功*/) {resolve(someValue)}

    else{/*异步操作失败*/ reject("失败原因")}

})

简单的示例:

let myFirstPromise = new Promise(function(resolve, reject){

    setTimeout(function(){

        resolve("成功"); 

    }, 500);});

myFirstPromise.then(function(successMessage){

    //successMessage的值是上面调用resolve(...)方法传入的值.

    console.log("Yay! " + successMessage);

});

Promise.prototype.then()

Promise 对象有以下几种状态:

pending:初始化状态,既不是成功,也不是失败

fulfilled:操作成功

rejected:操作失败

所以Promise 对象只能由pending状态变成fulfilled状态并传递成功信息或者由pending状态转换为rejected状态并传递失败原因。当这两种情况发生时就可以调用Promise的then方法中绑定的处理方法(handles)。then()最多需要有两个参数:Promise 的成功(onfulfilled )和失败(onrejected)情况的回调函数。并且因为Promise.prototype.then()以及下边要写到的Promise.prototype.catch方法返回的都是promise对象,所以他们可以被链式调用。

简单示例:

//语法

p.then(function(value) {

    // fulfillment    

}, function(reason) { 

   // rejection

});

//示例

let mypromise = new Promise(function(resolve, reject) {

    resolve('Success!');

});

mypromise.then(function(value) {

    console.log(value); // expected output: "Success!"

});

链式调用示例:

var promise = new Promise(function(resolve, reject) {

      resolve(1);

});

promise.then(function(val) { 

    console.log(val); // 1 

    return val + 2;

}).then(function(val) { 

        console.log(val); // 3

    })

Promise.prototype.catch()

        catch()then()一样都会返回一个Promise,它用来处理失败的情况。类似于then()Promise.prototype.then(undefined, onRejected)

简单示例:

var promise = new Promise(function (resolve, reject) {

        reject(new Error('test'));

});

 promise.catch(function (error) {

        console.log(error);

});


Promise.prototype.finally

        finally()方法同catch()类似,都像是then()的一个语法糖,不同的是catch是在rejected时调用,而finally则是在promise状态settled“已凝固”(fulfilled或者rejected)之后调用。参考:http://web.jobbole.com/94780/

Promise.all()

     promise.all(iterable)可以说非常实用。实际编程中经常遇到,有多个异步,想等所有异步返回结果之后,对结果进行下一步的操作,那么promise.all(iterable)就可以帮助你实现。它同样会返回一个promise实例,当iterable参数内的所有promise都完成或者参数中不包含有promise时回调完成。当参数内有任意一个promise失败,则回调失败并返回第一个失败promise的结果。

简单示例:

var promise1 = Promise.resolve(3);

var promise2 = 42;

var promise3 = new Promise(function(resolve, reject) {

    setTimeout(resolve, 100, 'foo');

});

Promise.all([promise1, promise2, promise3]).then(function(values) {

    console.log(values);  //Array [3, 42, "foo"]

});

    参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

    如有错误望斧正。

作为一个90后,既然早早地抱起了保温杯,泡上了枸杞水,那就认真地过好每一天吧。

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

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,676评论 1 56
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 815评论 0 2
  • 本文适用的读者 本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,...
    HZ充电大喵阅读 7,285评论 6 19
  • 关于Promise的基本内容,已经写过一篇文章。基本的会用,偶尔也用过,不过知识点比较多,并且代码在外面套了好几层...
    勇往直前888阅读 1,099评论 0 4
  • 前言 本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法。并在文末会附上一...
    _暮雨清秋_阅读 2,174评论 0 3