Your Browser Don't Support Canvas, Please Download Chrome ^_^``
ES6

Promise

字数: 123123   阅读数: 0
Posted by Kerwin She on April 17, 2018

摘抄自阮老师ES6入门

1.Promise含义

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。 Promise对象有以下两个特点:

  • 对象的状态不受外界影响,Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
  • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。

Promise对象缺点:

  • 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
  • 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
  • 当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

2.基本用法

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。 下面代码创造了一个Promise实例。

const promise = new Promise(function(resolve, reject) {
 // ... some code
 if (/* 异步操作成功 */){
   resolve(value); //从“未完成”变为“成功”(即从 pending 变为 resolved)
 } else {
   reject(error);//从“未完成”变为“失败”(即从 pending 变为 rejected)
 }
});

注意: Promise对象一旦创建,就会立即执行所传进去的函数

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数

  promise.then(function(value) {
   // success
  }, function(error) {
   // failure
  });

注意 :

  • then函数的第二个参数是可选的,
  • value参数是 Promise实例的reslove传过来的,error则是reject

3.执行顺序

  let promise = new Promise(function(resolve, reject) {
     console.log('Promise');
     resolve();
     console.log('hello')
  });
  promise.then(function() {
   console.log('resolved.');
  });
  console.log('Hi!');
  // Promise
  // hello
  // Hi!
  // resolved

注意

  • Promise 新建后会立即执行 :所以先输出 Promise
  • then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行 : 所以最后输出resolved
  • resolvereject并不会终结 Promise 的参数函数的执行: 所以hello依旧能输出

4.reslovereject的参数

如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数.

### reject

reject函数的参数通常是Error对象的实例,表示抛出的错误

resolve

resolve函数的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样

  const p1 = new Promise(function (resolve, reject) {
   // ...
  });

  const p2 = new Promise(function (resolve, reject) {
   // ...
   resolve(p1);
  })

上面代码中,p1p2都是 Promise 的实例,但是p2resolve方法将p1作为参数,即一个异步操作的结果是返回另一个异步操作。

注意: p1的状态决定了p2的状态,所以p1状态为resolved或是rejected时,p2的回调函数才会执行

例子:

  const p1 = new Promise(function (resolve, reject) {
   setTimeout(() => reject(new Error('fail')), 3000)
  })

  const p2 = new Promise(function (resolve, reject) {
   setTimeout(() => resolve(p1), 1000)
  })

  p2
   .then(result => console.log(result))
   .catch(error => console.log(error))
  // Error: fail

上面代码中,p1是一个 Promise,3 秒之后变为rejected。p2的状态在 1 秒之后改变,resolve方法返回的是p1。由于p2返回的是另一个 Promise,导致p2自己的状态无效了,由p1的状态决定p2的状态。所以,后面的then语句都变成针对后者(p1)。又过了 2 秒,p1变为rejected,导致触发catch方法指定的回调函数。

5.Promise.prototype.then()

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

getJSON("/posts.json").then(function(json) {
 return json.post;
}).then(function(post) {
 // ...
});

采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

getJSON("/post/1.json").then(function(post) {
 return getJSON(post.commentURL);
}).then(function funcA(comments) {
 console.log("resolved: ", comments);
}, function funcB(err){
 console.log("rejected: ", err);
});

注意then方法之所以支持链式调用是因为其默认创建了新的Promise实例返回。

6.Promise.prototype.catch()

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

Promise.prototype.catch方法可以捕获状态为rejected,也可以捕获错误对象 Error

const promise = new Promise(function(resolve, reject) {
 reject('test')
});
promise.catch(function(error) {
 console.log(error);
});
// Error: test
const promise = new Promise(function(resolve, reject) {
 throw new Error('test');
});
promise.catch(function(error) {
 console.log(error);
});
// Error: test

如果 Promise 状态已经变成resolved,再抛出错误是无效的

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

Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。

getJSON('/post/1.json').then(function(post) {
 return getJSON(post.commentURL);
}).then(function(comments) {
 // some code
}).catch(function(error) {
 // 处理前面三个Promise产生的错误
});

一般来说,不要在then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。 catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法。

7.Promise.prototype.finally()

finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的

8.Promise.all()

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

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

9.Promise.race()

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

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

上面代码中,只要p1p2p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数

10.Promise.resolve()

有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。

 const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成的deferred对象,转为一个新的 Promise 对象。 Promise.resolve等价于下面的写法。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

推荐

BlueBird : 让所有浏览器都支持 ES6 Promise 对象