24# Promise

Promise 介绍
(一) 基本概念：Promise 是 ES6 中新增的异步编程 解决方案，体现在代码中它是一个对象，可以通 过 Promise 构造函数来实例化。
(二) NewPromise(cb)=>实例的基本使用 Pending Resolved Rejected
(三) 两个原型方法：
1. Promise.prototype.then()
2. Promise.prototype.catch()
(四) 常用的静态方法：
1. Promise.all(): 可以将多个 promise 实例包装 成一个新的 promise 实例 当所有 Promise 实例的状态都变成 resolved， Promise.all 的状态才会变成 resolved，此时返 回值组成一个数组，传递给 then 中的 resolve 函数。 只要其中有一个被 rejected，Promise.all 的状态就变成 rejected，此时第一个被 reject 的实 例的返回值，会传递给 p 的回调函数。
五、Promise 改造 ajax 依赖调用
NewPromise(ajax1).then(ajax2).catch() 使用了链式调用代替了嵌套结构。一个promise对象可 以理解为一次将要执行的操作（常常被用于异步操作）， 使用了Promise对象之后可以用一种链式调用的方式 来组织代码，让代码更加直观。而且由于Promise.all 这样的方法存在，可以让同时执行多个操作变得简单。 resolve()和reject()则意味着成功回调和失败回调的执行
二。Promise改变了不按顺序加载

<script>
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            alert(1);
            resolve();
        },3000);
    }).then(()=>{
        return new Promise((resolve,reject)=>{
                 setTimeout(()=>{
                    alert(2);
                    resolve();
            },2000);
        })
    }).then(()=>{
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                alert(3);
                resolve();
            },1000);
        })
    }).then(()=>{
        setTimeout(()=>{
            alert(4);
        },500);
    })
</script>
<script>
    
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            alert(1);
            resolve();
        },3000);
    }).then(()=>{
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                alert(2);
                resolve();
            },1000)
        })
    }).then(()=>{
        setTimeout(()=>{
            alert(4);
        },1000)
    })


</script>

二。例

<script>
        new Promise((resolve,reject)=>{
            ajax.get('1.txt',(txt1)=>{ //txt1 是1.txt里面的内容
                resolve(txt1);
            })
        }).then((txt1)=>{
           return new Promise((resolve,reject)=>{
                 ajax.get(txt1,(txt2)=>{ //txt2 是2.txt里面的内容
                resolve(txt2);
            })
            })
           
        }).then((txt2)=>{
            ajax.get(txt2,(txt3)=>{  //txt3 是3.txt里面的内容
                alert(txt3);
            })
        })
    
    </script>

例：三

<script>
      
    function loadImg(src){
        return  new Promise((resolve,reject)=>{
            //img对象
            let oImg = new Image();
            //利用Image这个系统的构造函数，相当于document.createElement('img');
            oImg.src = src;
            // 给图片添加加载事件
            oImg.onload = function(){
                resolve(this);
            }
            // 给图片添加失败事件
            oImg.onerror = function(){
                reject('图片加载失败');
            }
        })
    }  
    // 将图片放入到数组中
    let arrImg = ['img/0.jpg','img/1.jpg','img/2.jpg'];

    // 调用函数接收一个promise对象
    let oP = loadImg(arrImg[1]);

    oP.then((img)=>{
        document.body.appendChild(img);
    }).catch((str)=>{
        console.log(str);
    })




    // function loadImg(src){
    //     return new Promise((resolve,reject) => {
    //         let oImg = new Image();
    //         oImg.src = src;
    //         oImg.onload = function(){
    //             resolve(this);
    //         }
    //         oImg.onerror = function(){
    //             reject('加载图片失败');
    //         }
    //     })
    // }
    // let arrImg = ['img/0.jpg','img/1.jpg','img/2.jpg'];
    // let oP = loadImg(arrImg[2]);

    // oP.then((img)=>{
    //     document.body.appendChild(img);
    // }).catch((str)=>{
    //     console.log(str);
    // })
    </script>

例四：

<script>
        function loading(src){
            return new Promise((resolve,reject)=>{
                let img = document.createElement('img');
                img.src = src;
                img.onload = function(){
                    resolve(this);
                }
                img.onerror = function(){
                    reject('啦啦啦啦');
                }
            });
        }
        let arrImg = ['img/0.jpg','img/1.jpg','img/2.jpg'];

        let oP = Promise.all([loading(arrImg[0]),loading(arrImg[1]),loading(arrImg[2])]);

        oP.then((imgs)=>{
            let body = document.body;
            imgs.forEach((value)=>{
                body.appendChild(value);
            })
            
        }).catch((err)=>{
            console.log(err);
        })




        // // 将图片放入到数组里面
        // let arrImg = ['img/0.jpg','img/1.jpg','img/2.jpg'];
        // function loading(src) {
        //     return new Promise((resolve,reject)=>{
        //         let img = document.createElement('img');

        //         img.src = src;
        //         img.onload = function(){
        //             resolve(this);
        //         }
        //         img.onerror = function(){
        //             reject('图片加载失败哦');
        //         }
        //     })
        //     // return oP;
        // }    
        // let oP = Promise.all([loading(arrImg[0]),loading(arrImg[1]),loading(arrImg[2])]);

        // oP.then((imgs)=>{
        //     let body = document.body;
        //     imgs.forEach((value)=>{
        //         body.appendChild(value);
        //     })
        // }).catch((err)=>{
        //     alert(err);
        // })
    </script>

ajax面向对象方法封装

// 面向对象封装
let ajax = {

    get: function(url,fn){
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
        xhr.open('GET',url,true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                if(typeof fn === "function"){
                    fn(xhr.responseText);
                }
            }
        }
    },
    post: function(url,date,fn){//'key=value&key = value'
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
        xhr.open('POST',url,true);
        //设置请求头的信息（内容类型）
        xhr.setRequestHeader('content-type','Application/x-www-form-urlencoded;charset=utf-8');
        xhr.send(date);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                if(typeof fn === 'function'){
                    fn(xhr.responseText);
                }
            }
        }
    }
};


/*
 * get: url地址后传参（请求头）传递数据小1k 传递速度快  不安全
 * post: http请求体中传参   传递数据大2M  传递速度慢  相对安全
 */