Promise对象

一、作用

是异步编程的一种解决方案。

二、特点

　　（1）状态不受外界影响。有三种状态：pending（进行中）   fulfilled（已成功）   rejected(已失败)

　　（2）状态确定后，不会再改变，任何时候都可以得到这个结果

　　（3）创建后立即执行

三、缺点

　　（1）无法取消Promise

　　（2）内部报错，不会反应到外部

　　（3）当处于pending状态时，无法得知进度（刚刚开始还是即将完成）。

四、语法

　　（1）创建：Promise对象是一个构造函数，通过new创建实例，该构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

 　   （2）实例方法：

　　　　　　1、then([Fn], [Fn]) ：返回Promise函数，所以后面还可以直接加then( )。第二个参数最好不要使用，改成 catch() 更好   （链式只需要最后添加catch() 就能捕获前面所有的错误）

　　　　　　2、catch(Fn) ：指定发生错误是的回调函数，返回Promise函数，所以后面也可以直接加then( )   【Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止】

　　　　　　3.finally( Fn ) : 不管promise的状态如何，最后都会执行finally()

　　　　　　注：这三个方法，刚好对应异常捕获（try......catch......finally）

function loadImage(url){
            return new Promise(function(resolve,reject){
                const image = new Image();
                image.onload = function(){
                    resolve(image);
                }
                image.onerror = function(){
                    reject("加载图片出错");
                }
                image.src = url;
            });
        }
       

        loadImage('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
        .then((data)=>{
            $("body").append(data);
            return loadImage('https://www.baidu.com/img/none.png');
        }).then(
            data => $("body").append(data)
        ).catch( error => console.log(error))
        .finally(() => {
            console.log('结束');
        });

 

 

　　（3）静态方法

　　　　　　1.Promise.all( Iterator ) : 参数是带有Iterator接口 ，且每个成员都是Promise实例，返回数组。如果有一个是reject或者全部都是resolve就会返回结果。(且命题：一假全假)

　　　　　　2.Promise.race( Iterator ) : 参数是带有Iterator接口 ，且每个成员都是Promise实例，返回数组。只要有一个有结果就会返回。（或命题：一真全真；有结果，立即返回，无论对与错）

　　　　　　3.Promise.allSettled( Iterator ) : 参数是带有Iterator接口 ，且每个成员都是Promise实例，返回数组。全部都有结果才会返回。状态只可能变成fulfilled。（一定要全部运行完）

　　　　　　4.Promise.any( Iterator ) : 参数是带有Iterator接口 ，且每个成员都是Promise实例，返回数组。全部都有结果才会返回。（一真全真；一定要全部运行完）

注：any() 和 race() 的异同：（同：真假相同           异：any() 不会因为某个 Promise 变成rejected状态而结束。race() 是只要有一个操作有返回结果，就立即返回，其他操作终止）

function timeout(status,value,time){
            return new Promise((resolve,reject) => {
                setTimeout(() => {
                    if(status == "resolve"){
                        resolve(value);
                    }else{
                        reject(`报错${value}`);
                    }
                },time);
            });
        }
        

        const arr = [
            {'status':'resolve',value:"第一个",time:1000},
            {'status':'reject',value:"第二个",time:2000},
            {'status':'resolve',value:"第三个",time:1500}
        ];
        const pArr = arr.map(item =>  timeout(item.status,item.value,item.time));

        Promise.all(pArr).then(Arr => {
            //没执行
            console.dir(Arr);     
            return Promise.race(pArr);
        }).catch(error => { 
            console.dir(error);       //报错第二个
            return Promise.race(pArr);
        }).then(result => {
            console.dir(result);      //第一个
            return Promise.allSettled(pArr);
        }).catch(error => {
            //没执行
            console.dir(error);   
            return Promise.allSettled(pArr);
        }).then(Arr => {
            console.dir(Arr);   
            /*
                [
                    {status: "fulfilled", value: "第一个"},
                    {status: "rejected", reason: "报错第二次"},
                    {status: "fulfilled", value: "第三个"}
                ]   
            */
            return Promise.any(pArr);
        }).then(Arr => {
            console.dir(Arr);     //第一个
        }).catch(error => {
            console.dir(error);      // 没运行
        });

 

　　　　　　5.Promise.resolve([参数]) :

　　　　　　　　作用： 将其他类型的对象，转化为Promise对象

　　　　　　　    特点： 调用then()都是返回resolved结果

　　　　　　　　参数要求：

　　　　　　　　　　（1）Promise实例

　　　　　　　　　　（2）thenable对象：具有then方法的对象

　　　　　　　　　　（3）参数不是具有then()方法的对象，或根本就不是对象

　　　　　　　　　　（4）不带有任何参数   ： 方便的得到Promise对象

　　　　　　6、Promise.reject([参数]) :

　　　　　　　　作用： 将其他类型的对象，转化为Promise对象

　　　　　　　    特点： 调用then()都是返回rejected结果

const p1 = Promise.resolve("aaa")
        //相当于
        const p2 = new Promise((resolve,reject) => {
            resolve("aaa");
        });

        p1.then(result => console.dir(result));   //aaa
        p2.then(result => console.dir(result));   //aaa


        const p3 = Promise.reject("出错");
        //相当于
        const p4 = new Promise((resolve,reject) => {
            reject("出错");
        })
        p3.catch(error => console.dir(error));   //出错
        p4.catch(error => console.dir(error));   //出错

　　　　　　7.Promise.try()  :  模拟了try代码块 

五、应用

　　（1）异步加载图片

　　（2）Generator函数与Promise的结合，完成异步操作，具体请查看  异步编程