JS——promise

川长思鸟来 2022-06-04 08:54 182阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<script>
    		function conn(){
    			return new Promise(function(resolve,reject){
    				console.log("尝试建立连接...");
    				setTimeout(()=>{
    					var err=Math.random()<0.1?true:false;
    					if(!err){
    						console.log("连接成功!");
    						resolve(); //会触发promise执行then中的回调函数
    					}else{
    						reject("连接出错");
    					}
    				},3000);
    			})
    		}
    		function query(){
    			return new Promise(function(resolve,reject){
    				console.log("开始查询数据...");
    				setTimeout(()=>{
    					var err=Math.random()<0.1?true:false;
    					if(!err){
    						console.log("查询完成");
    						resolve();
    					}else{
    						reject("查询出错");
    					}
    				},2000);
    			})
    		}
    		function response(){
    			return new Promise(function(resolve,reject){
    				console.log("开始返回结果...");
    				setTimeout(()=>{
    					var err=Math.random()<0.1?true:false;
    					if(!err){
    						console.log("结果返回完成");
    						resolve();
    					}else
    						reject("返回结果失败");
    				},1000);
    			})
    		}
    		function load(){
    			console.log("开始加载数据...");
    			setTimeout(()=>console.log("数据加载完成"),500);
    		}
    		conn()
    		 .then(query)
    		 .then(response)
    		 .then(load)
    		 .catch(function(err){
    		 	document.write(`<h1 style="color:red">${err}</h1>`);
    		 })
    	</script>
    </body>
    </html>

\---------------------------------------------

返回的是一个new Promise对象，所以可以调用对应的.then方法。

http://es6.ruanyifeng.com/\#docs/promise