Js异步的四个问题及解决方式--------Promise

异步

1,当异步的嵌套层数很多的时候,代码就使用的难以维护了。

2,在一部中无法正常的使用return和throw,必须使用return callback(function());

3, 无法正常的检索堆栈信息,一个回调一个堆栈。

4,多个回调之间难以建立起联系,回调启动,无法对这个回调进行操作。

场景

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>


</body>
<script type="text/javascript">
 console.log("A抬左手");
 B();
 function B(){
 setTimeout(function(){
 console.log("B抬右手");
 C();
  },1000);
}
function C(){
 setTimeout(function(){
 console.log("C到A后抬左手");
 D()
 },1000);
}
function D(){
 setTimeout(function(){
 console.log("D到B后抬右手");
  E();   
    },1000);
}
function E(){
setTimeout(function(){
console.log("E在中间抬双手");     
   },1000);
}
</script>
</html>


</script>
</html>

这串代码非常简单,就是A抬 左手,1s后B抬右手,C等B完事1s跑到A后抬左手,D....

因为每个人的动作必须等到另一个人操作完之后再去干,所以我们的动作必须在异步函数里一层层嵌套,这样我们的

一个函数就做了太多的事情,代码复杂臃肿难以维护。即使把每个动作进行封装函数,那也是A调用B,B调用C,C调用D,

代码之间相互侵入,也是不够优雅的。

优化-使用Promise

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
<script type="text/javascript">
var promise=new Promise(function(resolve,reject){
 console.log("A抬左手");
 setTimeout(function(){	
	console.log("B抬右手"); 
	resolve('B完成了');
  },1000);
  
});
var promise1= promise.then(function(data){
  console.log(data);	
 var promise=new Promise(function(resolve,reject){

  setTimeout(function(){
    
	console.log("C到A后抬左手");
	resolve('C完成了');   
  },1000);     
 });
 return  promise;
});
var promise2= promise1.then(function(data){
	 console.log(data);	
 	var promise=new Promise(function(resolve,reject){
	 setTimeout(function(){	
	 console.log("D到B后抬右手"); 
	 resolve('D完成了');  
    },1000);
	  
});
return  promise;
});
 promise2.then(function(data){
 	 console.log(data);	
   setTimeout(function(){	
 	console.log("E中间举双手"); 
 	//resolve('E完成了');  
   },1000);

});

</script>
</html>

优点

通过promise重构之后,代码就没有了嵌套,各大模块也不存在任何影响,他们所有的交互都交给了promise,每个异步

resolved(obj)告诉promise一个状态,等到异步结束,他会自动帮你执行 .then(function(obj){})。


..

Resolve(“完成了”)是把“完成”了这个字符串告诉.then函数,这个参数当然也可以是个json等等其他类型的对象。

当然由于异步的层数有点多,所以用了链式的方式。

程序里只演示了Resolve,那么Reject该如何做?很简单.then(function(data){},function(error){})

 Promise更大的作用时,当我们的异步链其中的一部分不正常运行的时候,不在会再卡死,你可以使用其他的状态

进行处理。

一些方法

当然promise还提供了一些其他的方法,例如all(),catch(),race.

     all(异步1(),ays()2,),就是执行一组异步,在都执行完成之后,then中会收到一组返回数据,例如1返回“数据1”,

2返回“数据2”,那么then收到的是【“数据1”,“数据2”】。

     race(异步1(),ays()2,),执行一组异步,.then收到的最先执行完的异步返回的消息,例如1最先返回“数据1”,那么then

收到的是数据1,而异步2返回的数据不会做任何处理。

     catch promise执行异步报的异常会到catch里来,而不是去控制台。






猜你喜欢

转载自blog.csdn.net/weixin_41609327/article/details/80796815