×

学习promise中的.then(...).catch(...)

作者:andy0012018.11.06来源:Web前端之家浏览:387评论:0
关键词:promisethen()catch

以下三种情况中promise会报错:Uncaught (in promise) 123

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

new Promise((resolve,reject)=>{
    throw 123;
});

Promise.reject(123);

为了捕获promise中的错误,我们可以使用catch方法。

Promise.reject(123).catch(v=>{
    console.warn(v);
});

但是也可以使用

Promise.reject(123).then(v=>{
    console.log(v);
}).catch(v=>{
    console.warn(v);
});

我们知道,Promise.reject(123)会返回一个promise,
then函数会返回一个新的promise
那么catch为什么还能捕获到前面reject的promise呢?


原因在于then函数返回的promise有可能延续之前的promise状态``[[PromiseStatus]]`

The then() method returns a Promise.
It takes up to two arguments: callback functions for the success and failure cases of the Promise.

**Note: **
(1)If both arguments are omitted, or are provided non-functions, a new Promise is created with no additional handlers, simply adopting the final state of the Promise that then is called on.
(2)If the first argument is omitted or provided a non-function, the new Promise that is created simply adopts the fulfillment state of the Promise that then is called on (if it becomes fulfilled).
(3)If the second argument is omitted or provided a non-function, the new Promise that is created simply adopts the rejection state of the Promise that then is called on (if it becomes rejected).

The catch() method returns a Promise and deals with rejected cases only. It behaves the same as calling Promise.prototype.then(undefined, onRejected.

Promise.reject(123)  // { [[PromiseStatus]]:"rejected", [[PromiseValue]]:123 }
.then(v=>{
    console.log(v);
})                   // { [[PromiseStatus]]:"rejected", [[PromiseValue]]:123 }
.catch(v=>{
    console.warn(v);
                     // 没有return,相当于return undefined;
});                  // { [[PromiseStatus]]:"resolved", [[PromiseValue]]:undefined }

注:
promise.then(...).catch(...);promise.then(..., ...);不等价
尤其注意当promise.then(...).catch(...);中的then会抛异常的情况下。

promise
    .then(...)    //返回一个新的promise,如果then之前的promise是rejected则延续
    .catch(...);    //又返回一个新的promise,如果catch之前的promise是resolved则延续

promise
    //返回一个新的promise
    //如果then之前的promise是resolved,则由第一个参数返回
    //如果then之前的promise是rejected,则由第二个参数返回。
    .then(..., ...);

例子:

const fn = () => {
    throw 2;
}

//promise.then(...).catch(...);
Promise.resolve(1)         //{ [[PromiseStatus]]:"resolved", [[PromiseValue]]:1 }
    .then(v => {           //1
        fn();              //抛异常了,then返回一个rejected的promise
        return 3;          //后面不执行了
    })                     //{ [[PromiseStatus]]:"rejected", [[PromiseValue]]:2 }
    .catch(v => {          //v是throw的值2
        console.log(v);    //2
        return 4;          //catch返回一个resolved且值为4的promise
    });                    //{ [[PromiseStatus]]:"resolved", [[PromiseValue]]:4 }
//程序最后正常结束

//promise.then(..., ...);
Promise.resolve(1)         //{ [[PromiseStatus]]:"resolved", [[PromiseValue]]:1 }
    .then(
        v => {             //1
            fn();          //抛异常了,then返回一个rejected的promise
            return 3;      //后面不执行了
        },
        v => {             //这里只有then之前是rejected才执行
            console.log(v);//不执行
            return 4;      //不执行
        }
    );                     //{ [[PromiseStatus]]:"rejected", [[PromiseValue]]:2 }
//程序最后抛异常:Uncaught (in promise) 2
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/tu24801824.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

  • admin

    可以啊,请加群私聊。...

  • 访客

    换链接:http://davin.xin/pc/navigation...

  • 访客

    alert('哈哈')...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero