promise经典 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>promise</title>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		/**
			promise解决异步地狱调用问题; 通过then和catch进行监听promise的结果, 注意catch是所有的promise执行的结果它要写在最后.
		**/
		function testP(v) {
			return new Promise((resolve,reject)=> {
				$.get("http://localhost:8092/testpromise/"+v, res=> {
					if(res.code==0) {
						resolve(res)
					} else {
						reject(res)
					}
				})
			})
		}
		
		/**
			解决地狱回调案例
		**/
		testP(1).then(res=> {
			console.log('第一次执行成功'+ res);
			return testP(2);
		}).then(res=> {
			console.log('第二次执行成功'+ res);
			return testP(3);
		}).then(res=> {
			console.log('第三次执行成功'+ res);
		}).catch(err=> {
			console.log('某次执行失败:'+err)
		})
		
		/**
			Promise.all([p1,p2,p3]).then(([res1,res2,res3])> {
				//在这里写全部执行成功后的脚本
			}).catch(err=>{
				//code...
			})
		**/
		Promise.all([testP(1),testP(1),testP(3)]).then(([res1,res2,res3])=> { // 可以把1改成3看效果
			console.log('Promise.all全部执行成功了')
		}).catch(err=> {
			console.log('Promise.all执行出错了')
			console.log(err)
		})
	</script>
</head>
<body>
	内容
</body>
</html>

　　说明http://localhost:8092/testpromise/"+v 后台当v<=2时才返回code=0

posted @ 2020-09-13 02:19  trump2  阅读(119)  评论(0)    收藏  举报