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}falsePromise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

原因分析：

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