Promise对象调用

promise正常调用

// 异步方法,返回一个promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01")
.then( res => {
	return asynchronousFun( res+"::num02");
})
.then( res => {
	return asynchronousFun( res +"::num03");
})
.then( res => {
	console.info("res是:"+res);
})
.catch( res => {
	console.error(res);
})

代码执行结果:res是:num01::num02::num03

reject情况

// 异步方法,返回一个promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun() // 此处不传参,调用reject
.then( res => {
	console.info("第一次回调函数执行");
	return asynchronousFun( res+"::num02");
})
.then( res => {
	console.info("第二次回调函数执行");
	return asynchronousFun( res +"::num03");
})
.then( res => {
	console.info("第三次回调函数执行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("发生错误::",res);
})

代码执行结果:
在这里插入图片描述
由执行结果可看出:一旦reject,直接被catch捕获,后面的then都不会再执行。(reject相当于抛出异常)
下面继续测试,查看控制台输出情况来验证上述总结。

  • 一旦reject,后台面的then都不会执行
// 异步方法,返回一个promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01") 
.then( res => {
	console.info("第一次回调函数执行");
	return asynchronousFun();// 此处不传参,调用reject,检查控制台输出
})
.then( res => {
	console.info("第二次回调函数执行");
	return asynchronousFun( res +"::num03");
})
.then( res => {
	console.info("第三次回调函数执行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("发生错误::",res);
})

在这里插入图片描述

  • 手动抛出异常(reject相当于抛出异常)
// 异步方法,返回一个promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01") 
.then( res => {
	console.info("第一次回调函数执行");
	throw new Error("抛出一个异常"); //手动抛出异常
})
.then( res => {
	console.info("第二次回调函数执行");
	console.log("就到这里吧");
	return "就到这里吧";
})
.then( res => {
	console.info("第三次回调函数执行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("发生错误::",res);
})

在这里插入图片描述

Promise链式调用

then()方法返回的是一个新的promise对象。

then方法体中 return 语句,即为返回的这个promise对象的回调函数的参数;即下一个then()方法的参数。
// 异步方法,返回一个promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}
asynchronousFun("num01") 
.then( res => {
	console.info("第一次回调函数执行");
	return asynchronousFun( res+"::num02");
})
.then( res => {
	console.info("第二次回调函数执行");
	console.log("就到这里吧");
	return "就到这里吧";
})
.then( res => {
	console.info("第三次回调函数执行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("发生错误::",res);
})

在这里插入图片描述

由执行结果可知,第二个then执行完成后,返回一个字符串。后续的then依然能正确执行。就是因为then返回的是一个promise对象。而从打印结果可知:return返回的对象即为下一个then 回调函数的参数。

  • 来看看没有return语句的情况
// 异步方法,返回一个promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01") 
.then( res => {
	console.info("第一次回调函数执行");
	return asynchronousFun( res+"::num02");
})
.then( res => {
	console.info("第二次回调函数执行");
	console.log("就到这里吧");
	// 这里什么都不返回
})
.then( res => {
	console.info("第三次回调函数执行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("发生错误::",res);
})

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页