ES6 Promise - 掘金

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 请求获取数据界面的 loyou’yi’ge’p

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

发布于 2017-09-30 tags:

{ ES6 }