promise的简介和用法

promise的理解

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大,简单说就是一个容器，里面保存着某个未来才会结束的事件的结 果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

 var p=new Promise(function(reslove,reject){
            setTimeout(function(){
              console.log('penging ----初始化状态')
                reslove('第一个定时器')   //如果状态改为reslove 就执行.then回调函数
                reject('第二个定时器')    //如果状态改为reject 就执行.catch回调函数
            },2000)
        })
        p.then(function(res){
            console.log(res);  
        })
        p.catch(function(data){
            console.log(data);
        })

1.上面例子中的new promise中的回调函数是同步执行的

2.原型方法的回调函数(then,catch)都是异步执行的,属于异步消息队列中微任务

  promise分为三种状态

pending  进行中 
reslove/fulfilled  已接收
reject           已拒绝
状态一旦被确定之后就不能被改变啦

1.上面是promise的三种状态,其中fulfilled是已接收的状态,当状态转化为已接收时 就会触发.then-callback()回调函数中的内容,当状态转化为已拒绝(reject)时,就会触发.catch-callback()回调函数中的内容,

        let p=Promise.resolve('已接收状态');//已接收状态
        p.then(function(res){
            console.log(res);
        })
        
        //代替了
        let p1=new Promise(function(reslove,reject){
            reslove('2222');
        })
        p1.then(function(res){
            console.log(res);
        })

       let p2=Promise.reject('已拒绝状态'); //已拒绝的状态
        p2.catch(function(err){
            console.log(err);
        })

        //代替了 
        let p3=new Promise(function(reslove,reject){
            reject('已拒绝的状态')
        })
        p3.catch(function(err){
            console.log(err);
        })

promise回调函数可以被简写

  let p1=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p1')
                reslove('第一个promise');
            },2000)
        })
        let p2=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p2')
                reslove('第二个promise');
            },500)
        })
        let p3=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p3')
                reslove('第三个promise');
            },1000)
        })
              var task=[p1,p2,p3];
        let P=Promise.all(task);
        P.then(function(res){
            console.log('已接收的状态');
            console.log(res) //此时的res是 task数组里的数据
        }).catch(function(err){
            console.log('已拒绝的状态');
            console.log(err);
        })
        
        promise.all();
        是触发pending状态的promise
        ------task中的执行顺序是同步代码 跟编写程序无关,
        参数:promise回调函数中的实例对象,
        返回值 是一个全新的promise实例对象,

        .then();
        当所有的promise的pending状态发生改变 变为reslove (已接收的状态时)触发.then-callbak()中的回调函数,
         .catch()
         只要有一个peomise的状态变为reject(已拒绝时)就执行catch.callback()中的回调函数
       

promise.all();

promise.all(); 同时监听多个promise市里的状态变更,所有promise都变为fulfilled(已接收)执行 all-then-callbak,有一个拒绝就执行catch-callback  常用于多个并发业务 比如 同时发多个请求 等所有请求成功后在处理 比如多张图片上传

promise.all 捕获 rejec 不是绝对的 如果单个promise中不回来catcah promise.all就不会捕获catch

   let p1=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p1')
                reslove('第一个promise');
            },2000)
        })
        let p2=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p2')
                /* reslove('第二个promise'); */
                reject('第二个promise')
            },500)
        })
        let p3=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p3')
                reslove('第三个promise');
            },1000)
        })
              var task=[p1,p2,p3];
        let P=Promise.race(task);
        P.then(function(res){
            console.log('已接收的状态');
            console.log(res) //此时的res是 task数组里的数据
        }).catch(function(err){
            console.log('已拒绝的状态');
            console.log(err);
        })
        

promise.race();

       promise.race()是监听多个pending状态发生改变,要看第一个被执行的函数的状态是什么,如果是reslove(已接收的状态),那么就会执行.then-callback()中的回调函数,
       如果第一个被执行的函数的状态变为了reject(已拒绝),那么就执行.catch-callback()中的回调函数,
        注意!!! 主要就是看第一个被执行的函数,
        如上图 第一个被执行的函数是p2,要看他的状态发生什么改变,如果变成reslove(已接收)就执行.then-callback(),如果是reject(已拒绝)就执行catch-callback()

   let p1=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p1')
                reslove('第一个promise');
            },2000)
        })
        let p2=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p2')
                /* reslove('第二个promise'); */
                reject('第二个promise')
            },500)
        })
        let p3=new Promise(function(reslove,reject){
            setTimeout(function(){
                console.log('p3')
                reslove('第三个promise');
            },1000)
        })
              var task=[p1,p2,p3];
        let P=Promise.any(task);
        P.then(function(res){
            console.log('已接收的状态');
            console.log(res) //此时的res是 task数组里的数据
        }).catch(function(err){
            console.log('已拒绝的状态');
            console.log(err);
        })

 promise.any()

     promise.any()监听多个promise实例的状态,如果promise实例对象的状态都为reject(已拒绝)的话 就执行.catch-callback()中的回调函数,

     如果在监听的全部状态中只要有一个是resolve(已接收)的状态 就会执行.then-callback()中的回调函数

promise 应用

只要是异步程序都可以使用promise 比如 发送网络请求 ajax,解决异步bug,--->异步问题同步

 优点:将传统的回调函数实现异步 变为.then的链式调用

 -缺点:then可以一直执行,并且也不是很好的异步问题,也没有提高太大的代码可读性