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 等;
