ES6系列文章 Promise

Posted 2021-08-30 混子的日常

视频讲解

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

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 html5、php、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。