es6之promise简单理解及使用

野性酷女 2022-11-26 09:50 217阅读 0赞

## promise ##

`1. promise是解决异步的一种方案，也就是让promise帮我们去处理异步，最终promise会返回异步处理的结果。`  
`2. 有了promise之后，让异步处理更加灵活，还能够解决之前的回调地狱的问题。`

*  **promise的使用**
 *  我们需要用promise帮我们处理异步
    
        var a=new Promise(function(resolve.reject){ 
        	// 在这里来进行真正的异步处理
        	 setTimeout(function(){ 
        		console.log('hello promise')
              }, 100);
        }
 *  promise在处理异步的时候，会成功或者失败，成功调用resolve，失败调用reject
    
        var p = new Promise(function(resolve, reject){ 
              // 第一个形参是成功的回调 异步成功 resolve
              // 第一个形参是失败的回调 异步失败 reject
              // 这里用于实现异步任务
              setTimeout(function(){ 
                var flag = true;
                if(flag) { 
                  // 正常情况
                  resolve('hello promise');
                }else{ 
                  // 异常情况
                  reject('error ');
                }
              }, 200);
            });
 *  获取到异步的结果
    
        p.then(function(data){ 
        	//第一个函数是成功时调用
            console.log(data)
        },function(info){ 
        	//这个函数是失败时调用
            console.log(info)
        });
 *  promise解决回调地狱的问题  
    `在promise实例的then方法内部 如果return了一个新的Promise实例对象`  
    `下一个.then的成功回调函数，是属于新的promise处理异步的成功的回调`
    
        function queryData(url){ 
        	var p=new Promise((resolve.reject)=>{ 
        			var xhr=new XMLHttpRequest();
        			xhr.open('get',url);
        			xhr.send(null);
        			xhr.onlaod=function(){ 
        				if(xhr.status==200){ 
        					resolve(xhr.respomseText)
        				}else{ 
        					reject('服务器出错')
        				}	
        			}
        	})
        }
        queryData('http://localhost:3000/data').then(function(res){ 
              console.log(res)
              // queryData 返回的是 Promise实例对象
              return queryData('http://localhost:3000/data1')
            }).then(function(res) { 
              console.log(res)
              return queryData('http://localhost:3000/data2')
            }).then(function(res) { 
              console.log(res)
            })
 *  **promise的实例方法**  
    `通过实例对象来调用的方法或属性，我们叫做：实例方法或者实例属性`  
    `1. then: 第一个回调函数是成功的回调，第二个是失败的回调`  
    `2. catch：专门用来处理失败的`  
    `3. finally：不管成功还是失败都会执行`
    
        function foo() { 
        	      return new Promise(function (resolve, reject) { 
        	        setTimeout(function () { 
        	          resolve(123);
        	          // reject('error');
        	        }, 100);
        	      })
        	    }
        	    
              foo()
              .then(function(data){ 
                console.log(data)
              })
              .catch(function(data){ 
                console.log(data)
              })
              .finally(function(){ 
                console.log('finished')
              });
    
    `通过构造函数来调用的方发或属性，我们叫做：静态方法或者静态属性`  
    `1. all：该方法接收一个数组，数组的每一项都是处理异步的promise实例对象，数组每一项的异步都处理完成之后，all的then的成功的回调才会执行`  
    `2. race：使用的方式和all一摸一样，区别就是race的then的成功回调，只要有一个异步成功，then就调用`
    
        function queryData(url) { 
              return new Promise(function (resolve, reject) { 
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () { 
                  if (xhr.readyState != 4) return;
                  if (xhr.readyState == 4 && xhr.status == 200) { 
                    // 处理正常的情况
                    resolve(xhr.responseText);
                  } else { 
                    // 处理异常情况
                    reject('服务器错误');
                  }
                };
                xhr.open('get', url);
                xhr.send(null);
              });
            }
        
            var p1 = queryData('http://localhost:3000/a1');
            var p2 = queryData('http://localhost:3000/a2');
            var p3 = queryData('http://localhost:3000/a3');
            // 静态方法 实例方法
            // 通过构造函数调用的方法 叫做静态方法
            // 通过实例调用的叫做实例方法
        
            //1. Promise.all() 并发处理多个异步执行任务 ，所有任务都执行完才能得到结果
            // 这里会延迟3秒才会出结果
            Promise.all([p1, p2, p3]).then(function (result) { 
              console.log(result)
            })
            //2. Promise.race 并发处理多个异步任务 只要有一个任务完成就能得到结果
            // 得到最先返回的结果
            Promise.race([p1, p2, p3]).then(function (result) { 
              console.log(result)
            })