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 传递速度慢 相对安全
*/