ES6系列文章 Promise

ES6的Promise是个啥？是个承诺。为了解决 js 回调地狱。Promise 给我的体会是: 开始云里雾里，然后越用越好用。今天才明白承诺是什么意思。比如我自己承诺：如果减肥成功就买个iphone，如果减肥失败就去死~，哈哈、玩笑我并不会。

基本语法

new Promise((resolve, reject) => {
    // ...
});

resolve，reject方法由js引擎提供，不需要个人编写。

Promise的三种状态

1. pending(进行中)，执行了new Promise()命令后，promise实例就处于pending 的状态。
2. fullfilled(已成功)，promise内部执行了resolve方法，promise实例处于fullfilled状态，状态不可改变了。
3. rejected(已失败)，promise内部执行了reject方法，promise实例处于rejected状态，同样不可更改。 Promise.prototype方法then和catch

   new Promise((resolve, reject) => {
   setTimeout(() => {
       resolve('hello resolve');
   }, 500);
   })
   .then(val => {
   console.log(val);// hello resolve
   }, err => {
   console.error(err);// 该条语句不被执行
   });

   then最多有两个参数，参数一为 resolve后回调的函数，参数二为reject后的回调函数。then也可以只接收参数一。

   new Promise((resolve, reject) => {
   setTimeout(() => {
       reject('hello reject');
   }, 500);
   })
   .then(val => {
   console.log(val);
   }, err => {
   console.error(err);// hello reject
   });

   catch实际上是then函数的一种简写形式，当执行reject后，可以被catch 的回调函数接收处理。

   new Promise((resolve, reject) => {
   setTimeout(() => {
       reject('hello reject');
   }, 500);
   })
   .catch(err => {
   console.log(err); // hello reject
   });

   再谈谈Promise对象的异常处理

   在promise内部发生错误后不会被外层环境捕捉到。

   try {
   new Promise((resolve, reject) => {
       console.log(e);
   });
   } catch(e) {
   console.log('error is catched? ', e);// 该语句并未执行
   }

   若promise内部发生错误，会被自动的执行reject。

   new Promise((resolve, reject) => {
   console.log(e);
   })
   .catch(err => {
   console.log('error be rejected?', err);// error be rejected? ReferenceError: e is not defined
   });

   再来看看promise的链式调用吧

   let p = new Promise((resolve, reject) => {
   resolve('i am resolved');
   })
   .then(val => {
   return val;
   });
   console.log(p);// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

   在then中return的值又变成了promise对象。

   p.then(val => {
   console.log(val);// i am resolved
   });

   这个也为链式调用提供了基础。

   Promise 的静态方法all、race、resolve、reject

   all

   all静态方法接收promise对象的数组，并返回一个promise对象。当数组中的所有元素都resolve时，结果promise被resolve。若数组中有一个对象被 reject了，结果promise对象被reject。本人经常使用 all方法来处理多个ajax请求获取数据的界面loading 效果。

   let isLoading = true;
   let p1 = fetch(url1).then(json => {
   // ....
   });
   let p2 = fetch(url2).then(json => {
   // ...
   });
   let p3 = fetch(url3).then(json => {
   // ...
   });
   Promise.all([p1, p2, p3]).then(() => {
   isLoading = false;
   });

   race

   同样接收一个数组,结果也是一个promise 对象，当数组中的promise 对象有一个的状态改变时，race方法的结果promise对象变为相同的状态。具体应用场景笔者还没有遇到过。若有人遇到过，请在下面留言告知一下，感激不尽。

resolve、reject

静态函数Promise.resolve返回一个成功的promise对象，静态函数Promise.reject返回一个拒绝状态的 promise 对象。

refs

MDN Promise