首页手记 ES6系列文章 Promise

ES6系列文章 Promise

标签：

Node.js JavaScript 前端工具

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

基本语法

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

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

Promise的三种状态

pending(进行中)，执行了new Promise()命令后，promise实例就处于pending 的状态。
fullfilled(已成功)，promise内部执行了resolve方法，promise实例处于fullfilled状态，状态不可改变了。
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对象变为相同的状态。具体应用场景笔者还没有遇到过。若有人遇到过，请在下面留言告知一下，感激不尽。