Promise

Posted 2020-11-25 wangjingzhi

回调地狱

 1         var base = 0;
 2         var img = new Image();
 3         img.src = "./images/3-.jpg";
 4         img.onload = function(){
 5             base += img.width;
 6             var img1 = new Image();
 7             img1.src = "./images/4-.jpg";
 8             img1.onload = function(){
 9                 base += img1.width;
10                 var img2 = new Image();
11                 img2.src = "./images/5.jpg";
12                 img2.onload = function(){
13                     base += img2.width;
14                     console.log(base);
15                 }
16             }
17         }

 

使用函数式编程解决回调地狱

 1         var base = 0;
 2         init();
 3         function init(){
 4             var img = new Image();
 5             img.onload =  loadHandler;
 6             img.src = "./images/3-.jpg";
 7         }
 8 
 9         function loadHandler(e){
10             base += this.width;
11             if(this.src.indexOf("3-.jpg")>-1){
12                 this.src = "./images/4-.jpg";
13             }else if(this.src.indexOf("4-.jpg")>-1){
14                 this.src = "./images/5-.jpg";
15                 console.log(base);
16             }
17         }

 

 

非函数式编程只能使用Promise解决回调地狱

　　

 1         // resolve是成功时要执行的回调函数
 2         // reject是失败时要执行的回调函数
 3         /*  var p=new Promise(function(resolve,reject){
 4              var img=new Image();
 5              img.src="./img/3-.jpg";
 6              img.onload=function(){
 7                  // resolve函数可以带入一个参数
 8                  resolve(img);
 9              }
10              img.onerror=function(){
11                  // reject函数也可以带入一个参数
12                  reject(img.src);
13              }
14          }) */
15 
16 
17         p.then(function(img){
18             // reslove调用
19              console.log(img);
20          },function(src){
21             // reject调用
22              console.log(src);
23          }) 

 

简单封装下Promise

 1         class Promise{
 2             status = "pending";
 3             constructor(fn){
 4                 console.log(this);
 5                 fn(this.resolve,this.reject.bind(this));
 6             }
 7             resolve(result){
 8                 if(this.status !== "pending") return;
 9                 var ids = setTimeout((function(){
10                     this.setVal("resolve",result);
11                     clearTimeout(ids);
12                 }).bind(this),0);
13             }
14             reject(error){
15                 if(this.status !== "pending") return;
16                 var ids = setTimeout((function(){
17                     this.setVal("reject",error);
18                     clearTimeout(ids);
19                 }).bind(this),0);
20             }
21             then(_resolve,_reject){
22                 this._resolve = _resolve;
23                 this._reject = _reject;
24             }
25             catch(reject){
26                 this._reject = _reject;
27             }
28             setVal(_status,_arg){
29                 this.status = _status;
30                 if(_status === "resolve" && this._resolve){
31                     this._resolve(_arg);
32                 }else if(_status === "reject" && this._reject){
33                     this._reject(_arg);
34                 }
35             }
36         }
37 
38         
39         function loadImage(){
40             return new Promise(function(resolve,reject){
41                 var img = new Image();
42                 img.src = "./images/3-.jpg";
43                 img.onload = function(){
44                     resolve(img);
45                 }
46                 img.onerror = function(){
47                     reject(img.src);
48                 }
49             });
50         }
51         loadImage().then(function(img){
52             console.log(img);
53         },function(msg){
54             console.log(msg);
55         });