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
原因分析:
![](/qrcode.jpg)
这里只是考察了一个参数传递问题,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 。