promise深入了解

Pormise深入了解

import React from "react";

export default class Footer extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            flag : 0,
            result:''
        }
    }

    testPromise(){
        let promise = new Promise((resolve,reject)=>{
            if(this.state.flag == 1){
                resolve("操作成功！")
            }else{
                reject("操作失败")
            }
        })

        promise.then((value)=>{
            console.log(value);
        })
        promise.catch((value)=>{
            console.log(value);
        })
    }


    render(){
        return (
            <div>
                <p>
                    测试promise
                    <button style={{margin:"0 10px"}} onClick={this.testPromise.bind(this)}>执行</button>
                </p>
                <div>{this.state.result}</div>
            </div>

        )
    }
}

结果：

操作失败
Uncaught (in promise) 操作失败

原因分析：

promise支持链式回调，在执行testPromise()时，实际上定义了2个链式，当操作失败时首先执行catch声明的reject事件，但是在我们的方法中还定义了一 个then的链式，它并没有捕获异常，所以执行它的时候会抛出个错误信息。

import React from "react";

export default class Footer extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            flag : 0,
            result:''
        }
    }

    testPromise(){
        let promise = new Promise((resolve,reject)=>{
            if(this.state.flag == 1){
                resolve("操作成功！")
            }else{
                reject("操作失败")
            }
        })

        return promise.catch((value)=>{
            console.log("失败了:"+value);
        })


    }

    testPromise1(){
        this.testPromise().then((value)=>{
            console.log("成功了:"+value);
        })
    }

    render(){
        return (
            <div>
                <p>
                    测试promise
                    <button style={{margin:"0 10px"}} onClick={this.testPromise1.bind(this)}>执行</button>
                </p>
                <div>{this.state.result}</div>
            </div>

        )
    }
}

结果：

失败了:操作失败
成功了:undefined

原因分析

执行testPromise()的时候首先就执行了catch方法，此时返回了一个promise对象，但是该对象的异常已经被捕获了，那个该对象就是一个状态为onFulfilled状态的对象，他将执行then定义的方法。

    testPromise(){
        let promise = new Promise((resolve,reject)=>{
            if(this.state.flag == 1){
                resolve("操作成功！")
            }else{
                reject("操作失败")
            }
        })

        promise.catch((value)=>{
            console.log("失败了:"+value);
        })

        return promise  
    }

    testPromise1(){
        this.testPromise().then((value)=>{
            console.log("成功了:"+value);
        })
    }

结果：

失败了:操作失败
Uncaught (in promise) 操作失败

原因分析：

当执行testPromise的时候首先执行了catch方法，但是测试返回的promise对象还是最开始定义的对象，而不是catch捕获异常后生成的新的对象，所以，任然是2个链式，执行then的时候，抛出异常。

    testPromise(){
        let promise = new Promise((resolve,reject)=>{
            if(this.state.flag == 1){
                resolve("操作成功！")
            }else{
                reject("操作失败")
            }
        })

        return promise  
    }

    testPromise1(){
        this.testPromise().then((value)=>{
            console.log("成功了:"+value);
        }).catch((value)=>{
            console.log("失败了:"+value);
        }).then((value)=>{
            console.log(value)
        })
    }

结果：

失败了:操作失败
undefined

原因分析：

这里只是考察了一个参数传递问题，promise会将放回的参数传递给下一个链式。

    testPromise1(){
        Promise.resolve("操作成功！").then(Promise.resolve("失败成功！")).then((value)=>{
            console.log(value)
        })
    }

结果：

操作成功！

原因分析：

如果then的第一个参数不是一个函数，那么默认将该参数当作null处理。

testPromise1(){
        let promise = this.testPromise();
        promise.then((value)=>{
            console.log(promise)
            return promise;
        }).catch((error)=>{
            console.log(error)
        }).then((promise)=>{
            console.log(promise)
        })
    }

结果：

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "操作成功！"}
操作成功！

原因分析：

返回的promise对像只有PromiseValue被传给了下一个链式。

testPromise1(){
        let promise = this.testPromise();
        promise.then((value)=>{
            console.log(promise)
            return promise.then((value)=>{
                console.log(promise)
            });
        }).catch((error)=>{
            console.log(error)
        }).then((promise)=>{
            console.log(promise)
        })
    }

结果：

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "操作成功！"}
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "操作成功！"}
undefined

原因分析：

第一个then执行后pormise对象的状态已经为resolved，立即执行return的then方法，但是此时没有返回值，只是一个打印语句，我们说then会返回一个全新的Promise对象，放入之后的链式作业中，所以最后输出undefined。

    testPromise(){
        let promise = new Promise((resolve,reject)=>{
            if(this.state.flag == 1){
                resolve("操作成功！")
            }else if(this.state.flag == 0){
                reject("操作失败")
            }
        })

        return promise  
    }

    testPromise1(){
        let promise = this.testPromise()


        promise.catch(value=>{
                let a = Promise.resolve(promise)
                console.log(promise)
                console.log(a)
                console.log(promise === a)  
        });

    }

结果：

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: Promise}
false
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

原因分析：

当传入的参数是一个Promise时，对挂起状态和完成状态使用Promise.resolve()都会返回原 生的Promise ；对拒绝态的 Promise 使用 Promise.reject() 也没问题。而除此之外的情况全都会在原 Promise 上包装出一个新的 Promise 。