promise知识点

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

promise的特点：

  1. 对象的状态不会受到外界所影响，Promise对象代表一次异步操作，只会有三种状态Pending（进行中），Fulfilled（已成功），Rejected（失败）。只有异步操作的结果可以决定Promise对象的状态，任何其他操作都无法改变这个状态。
  2. Promise对象的状态变化只会有两种可能：（1）Pending变成Fulfilled（2）Pending变成Rejected。只要这两种情况任意一个发生，Promise的状态就会固定，不会再发生变化了。
  3. 如果状态已经发生的改变，再给给期添加回调函数，依然可以得到结果。这与event不同，事件一旦错过就没有了。
  4. 缺点： a. Promise一旦创建就会立即执行，无法中途取消。b. 如果不设置回调函数，Promise内部发生的错误，不会反应到外部。c. Pending状态时，无法得知当前进展到哪一状态。

基本用法

  1. 创建一个Promise实例;
var promise = new Promise(function (resolve, reject) {
  if(/*成功*/) {
    resolve(value);
  } else {
    reject(error);
  }
})

Promise实例创建完毕，我们需要通过then方法分别指定Resolved和Rejected状态的回调函数。

promise.then(function () {
  // success code
}, function () {
  // failure code
})

then 方法可以接受两个参数，第一个参数对应成功的回调函数，第二个对应的是失败的回调函数，并且第二个参数的可选的，不一定需要传递。

  1. Promise新建以后就会立即执行。
var promise = new Promise(function (resolve, reject) {
  resolve();
  console.log('promise')
})
promise.then(function () {
  console.log('resolved')
})
console.log('hi');
// 执行结果：
// promise
// hi
// resolved

then 方法指定的回调函数，将在当前脚本所同步任务执行完成才会执行，所以resolved最后输出。

Promise.prototype.then()

Promise实例具有then方法，也就是then方法是定义在Promise的原型对象上的，他的作用就是添加状态改变时的回调函数。
注意：then方法返回的是一新的Promise实例（不是原来的那个Promise实例）,因此可以链式调用。

var getJSON = function (url) {
  var promise = new Promise(function (resolve, reject) {
    var client = new XMLHttpRequest();
    client.open('GET', url);
    client.onreadystatechange = handler;
    client.responseType = 'json';
    client.setRequestHeader('Accept', 'application/json');
    client.send();
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
  })
  return promise;
}
getJSON('/posts.json').then(function (json) {
  return json.post;
}).then(function(post){
  //post 是上一个回调函数传过来的
})

上面的代码使用then方法，依次指定了两个回调函数，第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

getJSON('/post/1.json').then(function(post){
  return getJSON('/post/2.json')
}).then(function(post){
    console.log('resloved')
}, function(err){
    console.log('rejected')
})

上面的代码，第一个then方法返回了Promise对象，这时，第二个then指定的回调函数，要等到这个Promise对象状态改变时才会触发。

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, fn)的别名，用于指定发生错误的回调函数。

getJSON('/post.json').then(function(){
  // code
}).catch(function(err){
  console.log(err)
})

getJSON返回一个Promise对象，如果是成功状态就会走then里面设置的回调函数，如果失败了就会走catch设置的回调函数，如果then指定的回调函数里面出错了，也会被catch所捕获，调用catch设置的回调函数处理。

p.then(function(){
  //code
}).catch(function(){
  //code
})
// 等同于
p.then(function(){
  // code
}).then(null, function(){
  //code
})

// 第一种写法
var promise = new Promise(function(resolve, reject){
  try {
    throw new Error('test')
  } catch (e) {
    reject(e)
  }
})
promise.catch(function(err){
  console.log(err)
})
// 第二种写法
var promise = new Promise(function(resolve, reject){
  reject(new Error('test'))
})
promise.catch(function(error){
  console.log(error)
})

上面两种写法是等价的，可以看出reject方法作用，等同于抛出错误。

var promise = new Promise(function(resolve, reject){
  resolve('ok');
  throw new Error('test')
})
promise.then(function(value){
  console.log(value)
}).catch(function(err){
  console.log(err)
})
// ok

Promise在resolve语句后面再抛出错误，是不会被catch捕获的，等于没有抛出。

getJSON('/post/1.json').then(function(post){
  return getJSON('/post/2.json')
}).then(function(json2){
  // code
}).catch(function(e){
  console.log(e)
  // 捕获前面三个promise对象的错误
})

Promise对象的错误具有“冒泡”的性质，会向后面一直传递，直到被捕获为止。

//不推荐的写法
promise.then(function(data){
  //success
}, function(err){
  // failure
})
// 推荐写法
promise.then(function(data){
  //success
}).catch(function(err){
  console.log(err)
})

第二种方法优于第一种写法，理由是第二种可以捕获前面then 里面的错误，语法页更贴近（try/catch）。

var someAsyncThing = function() {
  return new Promise(function() {
    resolve(x + 2)
  })
}
someAsyncThing().then(function() {
  console.log('..')
})

上面的代码中，someAsynicThing函数产生的Promise对象会报错，但是没有指定catch方法这个错误是不会被捕获的，也不会被传递到外层的。

var promise = new Promise(function(resolve, reject) {
  resolve('ok');
  setTimeout(function(){
    throw new Error('test')
  }, 0)
})
promise.then(function(value) {
  console.log(value);
}).catch(function(err) {
  console.log(err);
})
// ok
// VM672:4 Uncaught Error: test

Promise指定在下轮的事件循环里面在抛出一个错误，到那个时候Promise的运行已经结束，所以这个错误会在函数体外抛出，冒泡到最外层成为未捕获的错误。

var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    // 将报错，x没有申明
    resolve(x + 2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
  return '123'
}).then(function(str){
  console.log('ok', str)
})
// err: ReferenceError: x is not defined
//    at <anonymous>:4:13
//    at Promise (<anonymous>)
//    at someAsyncthing (<anonymous>:2:10)
//    at <anonymous>:7:1
//ok 123

catch方法返回的还是一个Promise对象，因此后面还是可以接着调用then方法。

var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    resolve(2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
  return '123'
}).then(function(str){
  console.log('ok', str)
  // x 未定义会报错
  return x;
})
//ok 2
//ReferenceError: x is not defined
//    at <anonymous>:12:3
//    at <anonymous>

上面代码，Promise里面没有错误，就会跳过catch的方法，直接执行下面的then方法，then里面在出错就与前面的catch无关了，错误也不会被捕获。

var someAsyncthing = function() {
  return new Promise(function(resolve, reject){
    resolve(2)
  })
}
someAsyncthing().catch(function(err){
  console.log('err:', err)
// x 未定义
  return x
}).then(function(str){
  console.log('ok', str)
})
// ok 2

catch里面出了错误，因为后面没有catch了，导致这个错误不会被捕获，也不会被传递到最外层。

总结： 为了尽可能多的捕获到错误，应该将catch写在所有then的最后面，这样不仅可以捕获到promise的错误，也能捕获到前面then里面错误.

Promise.all()

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

var p = Promise.all([p1, p2, p3])

Promise.all接受一个数组作为参数，p1，p2，p3都是Promise实例，如果不是，就会先调用Promise.resolve方法，将其转为Promise实例。（Promise.all的参数可以不一定是数组，但一定是要实现Iterator接口的，且返回的每个成员都是Promise实例）
p的状态是由p1,p2,p3决定的：

  1. 只有p1,p2,p3的状态都变成fulfilled，p的状态就变成fulfilled，此时p1,p2,p3的返回组成一个数组，传递给p的回调函数。
  2. 只有p1,p2,p3中有一个的状态都变成rejected，p的状态就变成rejected，此时第一个变成rejected的实例的返回值，传递给p的回调函数。
var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            resolve(t)
        },t)
    })
}
var p1 = a(); var p2 = a();
Promise.all([p1,p2]).then(([p1,p2])=>{console.log(123, p1,p2)})
// 562 
// 879 
// 123 879 562

上面p1和p2是两个异步的操作，只有等到两个结果都返回了才会触发Promise.all的then的方法

// 由于是随机数要多试几次
var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            if(t < 500){
                reject(new Error('<500'))
            }
            resolve(t)
        },t)
    })
}
// 如果出错，p1将不是a函数返回的Promise，而是catch返回的promise
var p1 = a().catch((err) => {console.log('err:', err)});
var p2 = a().catch((err) => {console.log('err:', err)});
Promise.all([p1,p2]).then(([p1,p2])=>{console.log(123, p1,p2)}).catch((err) => {console.log('all',err)})
//7 a 里面的输出
//err: Error: <500 p1 的catch的输出
//    at <anonymous>:7:12
// 687 a 里面的输出
//123 undefined 687 Promise.all的then输出

上面p1和p2都有可能会Rejected，一旦Rejected就会被他们的catch所捕获，然后就会返回一个全新的Promise对象不再是原来的那个，全新的实例执行完catch以后也会变成Resolved， 导致Promise.all方法里面的两个实例都是Resolved，则会走Promise.all的then方法，而不会是catch方法。

Promise.race()

Promise.race方法同样是将多个Promise的实例，包装成一个新的Promise实例。

var p = Promise.race([p1,p2,p3])

上面代码，只要p1,p2,p3之中有一个实例率先改变了状态，p的状态就会跟着改变，那个率先改变的Promise实例的返回值，就传递给p的回调函数。
他处理参数的方法的原则和Promise.all是一样的。

var a = function(){
    var t = ~~(Math.random()*1000)
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log(t)
            resolve(t)
        },t)
    })
}
var p1 = a()
var p2 = a()
Promise.race([p1,p2]).then(t =>{console.log(123, t)})
// 87 a 函数输出
// 123 87 Promise.race的then输出
// 591 a 函数输出

Promise.resolve()

有时需要将现有的对象转化成Promise对象，Promise.resolve方法就起到这个作用。

var  jqPromise = Promise.resolve($.ajax('/1.json'))

上面的代码将jQuery生成的deferred对象，转成一个新的Promise对象。

Promise.resolve('foo')
// 等价于
new Promise(function(resolve, reject){
  resolve('foo')
})

Promise.resolve方法的参数分为四种情况
a. 参数是一个Promise实例
如果参数是一个Promise实例，那么Promise.resolve将不做任何修改，原封不动的返回这个实例。
b. 参数是一个thenable对象
thenable对象是指具有then方法的对象，例如：

 // thenable 对象
 let thenable = {
   then: function(resolve, reject){
     resolve(42)
   }
 }
 let p1 = Promise.resolve(thenable);
 p1.then(function(value){
   console.log(value) // 42
 })

thenable对象的then方法执行以后，对象p1的状态就会变成resolved，从而立即执行最后的那个then方法指定的函数，输出42
c. 参数不是具有then方法的对象，或根本就不是对象
如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved.

var p = Promise.resolve('hello')
p.then(function(s){
  console.log(s)
})
// hello

上面的代码生成一个新的Promise对象的实例p，由于字符串hello不属于异步操作（判断方法字符串不具有then方法），返回的Promise实例的状态从一生成就是Resolved，所以回调函数立即执行。Promise.resolve方法的参数，会同时传回给回调函数。
d. 不带任何参数
Promise.resolve方法允许调用时不带任何参数，直接返回一个Resolved状态的Promise对象。
注意： 立即resolve的Promise对象，实在本轮事件循环的结束时，而不是在下一轮事件循环的开始时

setTimeout(function(){
    console.log('setTimeout')
}, 0)
Promise.resolve().then(function(){
    console.log('Promise.resolve')
})
console.log('console.log()')
// console.log() 顺序执行
// Promise.resolve 本轮事件循环的尾部
// setTimeout 下轮事件循环的开始

setTimeout(fn, 0)实在下一轮事件循环的开始的时候执行的，Promise.resolve()实在本轮事件循环的结束时执行，console.log()立即执行，所以最先输出。

Promise.reject()

跟Promise.resolve方法类似，生成相对的状态为Rejected的Promise实例。

var p = Promise.reject('出错了');
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

生成的p的状态为Rejected的，回调函数立马执行。
注意： Promise.reject()方法的参数，会原封不动的作为reject的理由，比那成后续方法的参数，这一点与Promise.resolve方法不一致

const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

两个有用的附加方法

ES6的Promise API提供的方法不是很多，有些有用的方法可以自己部署。下面介绍如何部署两个不在ES6之中、但很有用的方法。

Done()

Promise对象的回调链，无论是以then方法或者catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。因此我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

asyncFunc()
  .then()
  .then()
  .catch()
  .done()

他的实现页很简单

Promise.prototype.done = function (onFulfilled, onRejected) {
  this.then(onFulfilled, onRejected)
    .catch(function (reason) {
        // 抛出全局错误
        setTimeout(() => {throw reason}, 0)
    })
}

done方法的使用，可以像then方法那样用，提供Fulfilled和Rejected状态的回调函数，也可以不提供任何参数。但不管怎样，done都会捕捉到任何可能出现的错误，并向全局抛出。

finally()

finally方法不管状态是成功还是失败，都会执行的的操作，他与done的最大的区别，是他接受一个回调函数作为参数，该函数不管怎样都必须执行。

server.listen(0)
  .then(function () {
    // run test
  })
  .finally(server.stop);

实现

Promise.prototype.finally = function (callback) {
  let P = this.cunstructor;
  return this.then(function(value){
    P.resolve(callback()).then(function(){
      return value;
    })
  }, function(reason){
    P.reject(callback()).then(function(){
      throw reason;
    })
  })
}

上面代码中，不管前面的Promise是fulfilled还是rejected，都会执行回调函数callback。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,386评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,939评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,851评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,953评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,971评论 5赞 369
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,784评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,126评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,765评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,148评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,479评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,080评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2赞 343

推荐阅读更多精彩内容

  • 13、Promise 对象
    00、前言Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,127评论 0赞 12
  • ES6之Promise深入学习笔记
    Promiese 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，语法上说，Pr...
    雨飞飞雨阅读 3,348评论 0赞 19
  • JavaScript(ES6) - Promise对象
    Promise的含义:   Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和...
    呼呼哥阅读 2,164评论 0赞 16
  • 史上最易读懂的 Promise 实现
    本文适用的读者 本文写给有一定Promise使用经验的人，如果你还没有使用过Promise，这篇文章可能不适合你，...
    HZ充电大喵阅读 7,296评论 6赞 19
  • 2016读书计划
    分为两类 技术类前端Javascript权威指南完成一半html5秘籍完成图解http完成javascipt高级程...
    骄傲的葡萄干阅读 232评论 3赞 0