为了账号安全,请及时绑定邮箱和手机立即绑定

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

点击查看更多内容
14人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
120
获赞与收藏
651

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消