promise

最新推荐文章于 2025-12-30 12:48:39 发布

原创最新推荐文章于 2025-12-30 12:48:39 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #前端

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何使用Promise实现异步并行处理三个任务（processA, processB, processC），链式调用中如何正确处理catch，以及1+n并发情况下错误的处理策略。重点介绍了在Promise链中设置onRejected回调以捕捉和终止错误。

这里写自定义目录标题

初始化
完全异步并行三个process
链式同步等待执行完毕
1+n并发
catch

初始化

let processStart = ()=>{
	return new Promise((resolve,reject)=>{
		console.log('start');
		setTimeOut(()=>{
			resolve('process start finished');
		},2000)
	});
}
let processA = ()=>{
	return new Promise((resolve,reject)=>{
		let it=setInterval(()=>{
			console.log('processA')
		},1000)
		setTimeOut(()=>{
			clearInterval(it);
			resolve('process A finished');
		},3000);
	});
}
let processB = ()=>{
	return new Promise((resolve,reject)=>{
		let it=setInterval(()=>{
			console.log('processB')
		},1000)
		setTimeOut(()=>{
			clearInterval(it);
			resolve('process B finished');
		},4000);
	});
}

完全异步并行三个process

processA();
processB();
processC();

/* 
 * 输出
 * start
 * 
 * processA
 * ProcessB
 * 
 * processA
 * processB
 * 
 * processA
 * processB
 * 
 * processB
 * 
 * /

链式同步等待执行完毕

processStart()
.then(value=>{
	console.log('value:',value);
	return processA();
})
.then(value=>{
	console.log('value:',value);
	return processB();
})
.then(value=>{
	console.log('value:',value);
})

/*
 * 输出
 * start
 * value: process start finished
 * processA*3
 * value: process A finished
 * processB*4
 * value: process B finished
 */

1+n并发

processStart()
.then(value=>{
	console.log('value',value)
	return Promise.all([processA(),processB()])
})
.then(values=>{
	console.log('values',values)
})

/*
 * start
 * process start finished
 * processA
 * processB
 * processA
 * processB
 * processA
 * processB
 * processB
 * values: ['process A finished','process B finished']
 */

catch

在promise链式调用中，如果出现了reject的状态，如果没有在.then(onFulfilled,onRejected)的第二个参数onRejected里被传入回调函数，会被catch捕获到并终止链式调用。

let processA = ()=>{
	return new Promise((resolve,reject)=>{
		let it=setInterval(()=>{
			console.log('processA')
		},1000)
		setTimeOut(()=>{
			clearInterval(it);
			//resolve('process A finished'); 修改前
			reject('process A failed'); //修改后
		},3000);
	});
}

ProcessStart()
.then(value={
	console.log('value:',value);
	return processA();
})
.then(
	value=>{
		console.log('value:',value);
	},
	reason=>{
		console.log('reason',reason);
	}
)
.then(
	value=>{
		console.log('value:',value);
	}
)
/* 
 * processA返回的promise虽然reject，但是因为我们在紧随其后的.then的参数里传入了onRejected回调函数，
 * 所以catch并不能捕获到错误
 * 如果我们想在onRejected回调函数里处理错误，并终止之后的链式调用，需要这样做
 * 1.如果紧随其后的.then没有onRejected回调函数，我们在想要终止链式调用的地方返回一个reject状态
 * 	
 */
	reason=>{
		console.log('reason',reason);
		return Promise.reject();
	}
/*
 * 这样因为可以将当前promise的状态置为reject，继而寻找下一个.then的onRejected回调，因为紧随其后的.then没有设置onRejected回调，
 * 链式调用得以停下
 * 另外可以在链式调用的结尾加上catch即可捕获Promise.reject产生的返回值（错误信息）
 */
 /*
  * 2.如果紧随其后的.then有onRejected回调
  * 有两种做法
  * 
  */
  a.
  return new Promise(()=>{})
  /*
   *将Promise状态设置为padding，就不会继续调用接下来的.then方法。
   */
   b.假设原来的调用顺序是这样的
		ProcessStart()
		.then(value={
			console.log('value:',value);
			return processA();
		})
		.then(
			value=>{
				console.log('value:',value);
				return processB();
			},
			reason=>{
				console.log('reason',reason);
				
			}
		)
		.then(
			value=>{
				console.log('value:',value);
			},
			reason=>{
				console.log('reason',reason);
				
			}
		)
	//我们想在processA的reject里判断是否进行接下来的processB
		ProcessStart()
		.then(value={
			console.log('value:',value);
			return processA();
		})
		.then(
			value=>{
				console.log('value:',value);
				return value;
			},
			reason=>{
				console.log('reason',reason);
				return Process.reject(reason)
			}
		)
		.then(
			value=>{
				console.log('value:',value);
				return PromiseB();
			}
		)
		.then(
			value=>{
				console.log('value:',value);
			},
			reason=>{
				console.log('reason',reason);
				
			}
		)