ES6——04(Promise内置对象)
目录
- 基本语法
- 运行的三种方式
- 练习
Promise内置对象
解决回调地狱
基本语法
new出promise对象的同时会执行传入的匿名函数
let p1=new Promise((resolve,reject)=>{}
resolve:表示成功执行的函数
reject:表示失败执行的函数
关键词 then()
then的用法
then(成功执行的函数,失败执行的函数)
示例
function task1(){
//new出promise对象的同时会执行传入的匿名函数
let p1=new Promise((resolve,reject)=>{
//模拟ajax
setTimeout(() => {
console.log("Promise 执行下单");
let n=Math.random();//0-1
if(n>=0.5){
console.log("下单成功");
resolve('订单号10000,支付99.9￥');
}else{
reject('下单失败');
}
}, 2000);
return p1;
}
task1().then((data1)=>{
console.log("成功执行了ajax请求1----"+data1);
},(data1)=>{
console.log("ajax请求1执行失败----"+data1);
})
真实使用场景
将模拟ajax改成真实的
//真实使用
$.ajax({
url:'增加订单的url地址',
data:{'数据'},
type:'get',
success:function(date){
resolve('下单成功');
},
error:function(date){
reject('下单失败');
}
})
链式操作执行
有执行顺序时用链式
function task1(){
//new出promise对象的同时会执行传入的匿名函数
let p1=new Promise((resolve,reject)=>{
//模拟ajax
setTimeout(() => {
console.log("Promise 执行下单");
let n=Math.random();//0-1
if(n>=0.5){
console.log("下单成功");
resolve('订单号10000,支付99.9￥');
}else{
reject('下单失败');
}
}, 2000);
return p1;
}
function task2(){
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log("Promise 执行付款");
let n=Math.random();//0-1
if(n>=0.5){
console.log("支付成功");
resolve('用户id001,支付99.9￥成功');
}else{
reject('支付失败');
}
}, 1000);
})
}
function task3(){
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log("Promise 执行更改库存");
let n=Math.random();//0-1
if(n>=0.5){
console.log("修改库存成功");
resolve('发货中,修改库存odk');
}else{
reject('修改库存失败');
}
}, 3000);
})
}
//链式操作
task1().then((data1)=>{
console.log("成功执行了ajax请求1----"+data1);
return task2();
},(data1)=>{
console.log("ajax请求1执行失败----"+data1);
}).then((data2)=>{
console.log("成功执行了ajax请求2----"+data2);
return task3();
},(data2)=>{
console.log("ajax请求2执行失败----"+data2);
}).then((data3)=>{
console.log("成功执行了ajax请求3----"+data3);
},(data3)=>{
console.log("ajax请求3执行失败----"+data3);
});
All执行
无执行顺序时用All,所有任务都完成了会执行All
//All执行
Promise.all([task1(),task2(),task3()]).then((ret)=>{
console.log("所有任务都做完了执行",ret);
});
race(赛跑)执行
谁第一个执行完就得到第一个执行完的返回结果
//race(赛跑)执行
Promise.race([task1(),task2(),task3()]).then((ret)=>{
console.log("第一个执行的返回结果是:"+ret);
})
练习
1、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现两个任务都完成以后才能升级。
2、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现只要其中有一个任务完成就显示“恭喜您获得大陆勇士的称号”
//采蘑菇
function mushroom(){
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log("采蘑菇");
resolve('采蘑菇成功....');
}, 2000);
})
}
//杀鸡
function killchicken(){
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log("杀鸡");
resolve('杀鸡成功....');
}, 1000);
})
}
//1
Promise.all([mushroom(),killchicken()]).then((ret)=>{
console.log("两任务都完成了,成功升级....",ret);
})
//2
Promise.race([mushroom(),killchicken()]).then((ret)=>{
console.log("恭喜您获得大陆勇士的称号:"+ret);
})
3、在页面上创建三个div，div从左往右移动，通过Promise使这三个div的移动速度不一样，同时当第一个div到达屏幕右边时，弹出当前到达屏幕右边的div的编号，并提示“第x个div获得了冠军”。
//3(此处设置终点为1920,可用变量设置)
//定时器
var s1;
var s2;
var s3;
function div1(){
var speed=parseInt(Math.random()*(1200-1)+1);
console.log(speed);
return new Promise((resolve,reject)=>{
s1=setInterval(()=>{
let one=document.querySelector("#one");
if(one.style.left==""){
one.style.left="0px";
}
one.style.left=parseInt(one.style.left)+speed+"px";
if(parseInt(one.style.left)>=1920){
console.log("到终点了...");
one.style.left=1920+"px";
resolve("div1是冠军");
clearInterval(s1)
}
},1000)
});
}
function div2(){
var speed=parseInt(Math.random()*(1200-1)+1);
console.log(speed);
return new Promise((resolve,reject)=>{
s2=setInterval(()=>{
let two=document.querySelector("#two");
if(two.style.left==""){
two.style.left="0px";
}
two.style.left=parseInt(two.style.left)+speed+"px";
if(parseInt(two.style.left)>=1920){
console.log("到终点了...");
two.style.left=1920+"px";
resolve("div2是冠军")
clearInterval(s2)
}
},1000)
});
}
function div3(){
var speed=parseInt(Math.random()*(1200-1)+1);
console.log(speed);
return new Promise((resolve,reject)=>{
s3=setInterval(()=>{
let three=document.querySelector("#three");
if(three.style.left==""){
three.style.left="0px";
}
three.style.left=parseInt(three.style.left)+speed+"px";
if(parseInt(three.style.left)>=1920){
console.log("到终点了...");
three.style.left=1920+"px";
resolve("div3是冠军")
clearInterval(s3);
}
},1000)
});
}
Promise.race([div1(),div2(),div3()]).then((ret)=>{
console.log(ret);
clearInterval(s1)
clearInterval(s2)
clearInterval(s3)
})
Promise练习完成-----------------------