Promise相关

页面中的加载顺序

• DOM的创建，script的加载，css的加载
• 形成css样式树，与dom样式树合并，形成渲染树
• 异步加载所有图片
• 全部加载完成（window.onload是在此阶段触发）

<script>

<script src="./aaa.js" async defer></script>
//async 异步加载
//defer 先加载其他，最后处理js加载，即在遇到</html>之后再执行
//在同时有多个延迟脚本存在时，并不一定会按顺序执行，因此最好只包含一个延迟脚本；
//在XHTML文档中，要把defer属性设置为defer="defer"，要把async属性设置为async="async"

• async

  表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效

• defer

  表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

Promise

解决回调地狱的机制：

创建第三方（状态机），有以下三种状态：

等待状态 : pending

成功 ： resolved

失败 ： rejected

这三种结果对于状态机来说也是回调；

回调地狱的步骤：

异步函数=>异步函数=>异步函数=>异步函数...

通过状态机改变后的步骤：

异步函数=>状态机=>异步函数=>状态机=>异步函数

由此解决了函数嵌套的问题；

let p = new Promise((resolve,reject)=>{
    console.log(1); //此处为同步程序
    resolve() || reject(); //在此处改变状态机（promise）的状态，调用不同的函数;//只有此处为异步
    console.log(2);//此处也为同步程序
})

//p.then(fn1,fn2) //状态监听，成功时调用fn1,失败时调用fn2
p.then(function(){
    console.log("success")
},function(){
    console.log("failed")
})

//catch 在失败时调用，相当于then里面的 fn2
//一般 then 只写 fn1 ,失败时用catch 用以区分
//catch 需要传入参数；//reject(err)
//then 中出现了错误，也不会中断程序的进行，会在catch 中打印错误信息
p.catch(function(err){
    console.log(err)
})

//finally 无论成功或者失败的时候都会执行
//finally 不需要传入参数
p.finally(function(){
    console.log("finally")
})

//catch小知识
//Promise 对象内部自带 try catch , 当同步代码发生运行时错误时，会自动将错误对象作为值reject，这样就会触发catch回调；
//这样使用时选哟注意异步队列的执行顺序的问题
let p = new Promise((resolve,reject)=>{
    throw "error"
})
p.catch(err=>{
    console.log("catch" + err) //catch error
})

Promise.all() || Promise.race()

这两个是Promise构造函数上面的方法（静态方法，直接通过类名来调用的方法）

Promise.all() 可以将多个promise实例包装成一个新的promise实例。同时，失败和成功的返回值是不同的，成功的时候返回的是一个结果数组，失败的时候返回最先被reject失败状态的值；

Promise.all()在处理多个异步处理时，非常有用

let p1 = new Promise((resolve,reject)=>{
    resolve("1成功")
})
//下面两种方法相当于上面的写法，静态的方法返回的依然是promise对象
let p2 = Promise.resolve("2成功")
let p3 = Promise.reject("失败了")

//成功的时候返回的是结果数组
Promise.all([p1,p2]).then(function(res){
    console.log(res)        //["1成功","2成功"]
})

//失败的时候返回最先失败的结果
Promise.all([p1,p2,p3]).then(function(res){
    console.log(res)
}).catch(error=>console.log(error)) //"失败了"

//Promise.race([p1,p2]) 谁先执行完谁调用then,打印谁的res
Promise.race([p1,p2]).then(res=>console.log(res))// "1成功" || "2成功"

Promise连缀

在JS编程中是支持连缀的，不支持大量函数嵌套

所谓promise连缀即为 promise.then()的返回值为promise，可以继续调用then方法

promise里面如果没有返回promise对象，那么强制返回一个新的promise对象，该promise对象的状态与上一个promise对象的状态一致；

如果在内部创建并return了一个新的promise对象，则返回结果为新的promise对象；

console.log(new Promise((resolve, reject) => { //Promise{} 没有返回promise对象的话，返回的为当前promise对象
            resolve()
        }).then(() => {
            return 1;
        }).then(() => {
            console.log(2) //2
        }).then(() => {
            console.log(3) //3
        }).then(() => {
            console.log(4) //4
        }).then(() => {
            console.log(5) //5
        }).then(() => {
            console.log(6) //6
        }).then(() => {
            console.log(7) //7
        }).then(() => {
            console.log(8) //8
        }))
//由此可以看出promise会返回一个promise, 即使return 的不是promise 对象也会强制return promise

下面来看一下稍微进阶一点的promise 连缀

   var now
        console.log(new Promise((resolve, reject) => {
            now = new Date().getTime();
            setTimeout(() => {
                console.log(new Date().getTime() - now) //1000
                console.log(0)
                resolve()
            }, 1000)

        }).then(() => {
            setTimeout(() => {
                console.log(new Date().getTime() - now) //2000
                console.log(1)
            }, 1000)
        }).then(() => {
            setTimeout(() => {
                console.log(new Date().getTime() - now) //3000
                console.log(2)
            }, 2000)
        }).then(() => {
            setTimeout(() => {
                console.log(new Date().getTime() - now) //4000
                console.log(3)
            }, 3000)
        }))
        //几个then 依次打印
        //根据时间差可以看出三个连缀的then是同时开始的

我们使用promise的连缀来写一个红绿灯

        class TrafficLight {
            constructor(parent, color) {
                this.elem = this.createElem(color);
                this.appendTo(parent)
            }
            createElem(color) {
                if (this.elem) return this.elem;
                let div = document.createElement("div");
                Object.assign(div.style, {
                    width: "100px",
                    height: "100px",
                    backgroundColor: null,
                    borderRadius: "50%",
                    float: "left",
                    margin: "50px",
                    border: "1px solid #ccc"
                })
                return div;
            }
            appendTo(parent) {
                parent.appendChild(this.elem)
            }
        }
        let redLight = new TrafficLight(document.body, "red");
        let yellowLight = new TrafficLight(document.body, "yellow");
        let greenLight = new TrafficLight(document.body, "green");

         function show() {
            new Promise((resolve)=>{
                setTimeout(()=>{
                    console.log("红灯")
                    changeColor(greenLight,redLight,"red")
                    resolve();
                },2000)
            }).then(()=>{
                setTimeout(()=>{
                    console.log("黄灯")
                    changeColor(redLight,yellowLight,"yellow")
                },2000)
            }).then(()=>{
                setTimeout(()=>{
                    console.log("绿灯")
                    changeColor(yellowLight,greenLight,"green")
                    show();
                },4000)
            })
        }
        function changeColor(pre,elem,color){
            pre.elem.style.backgroundColor = null;
            elem.elem.style.backgroundColor = color;
        }

        show();

看到这里你是否对promise的了解加深了一些呢？

还想了解更多的promise吗？

请持续关注，近期为您带来 async await Eventloop 以及promiseAjax 等;