promise
概述:
ajax返回值就是 promise
声明函数：new Promise(callback函数);
1.promise
默认为：pending
改变状态，通过resolve或reject方式
成功状态回调：reslove
失败状态回调：reject
2.promise实例化后，通过 then方法触发，then接收两个回调函数作为参数，第一个是成功，第二个为失败
3.通过then方法后，返回一个全新的promise，默认是正确情况
出现的目标： 解决回调地狱(callback hell), 解决异步编程问题
var p = new Promise((res,rej)=>{
//res,rej只会执行一个，且立即执行，
//PromiseStatus 里面有三个状态 等待，成功，失败
// return res，rej看具体需求
})
书写方式：
写法1
p.then((data)=>{
//promise执行后的调用回调函数
console.log(data)
},()=>{
console.log('失败');
}) ///上面成功失败，也可写成另外一种方式
写法2
p.then(()=>{
console.log('成功')
})
p.catch(()=>{
console.log('失败')
})
p.then(()=>{}) 是有返回值的，返回值还是promise ,且默认返回resolved情况
例：链式调用
p
.then(()={
console.log(1);
//then中再次调用函数中，成功失败取决于上一个函数返回值
})
.then(()={
console.log(2);
})
.catch((err)={
console.log(err)
})
如果希望在中途某一个点，跳出，可以抛出一个错误（因为promise默认返回正确的情况）
Promise.reject('出错了')方法 同 new Promise((resolve,reject)=>{ reject('出错了') });
Promise.reject(reason)方法也会返回一个新的Promise实例，该实例的状态为rejected
var P1 = new Promise((resolved,rejected)=>{
resolved('start count!');
})
P1.then((data)=>{
console.log(data);
}).then(()=>{
console.log('1');
}).then(()=>{
console.log('2');
return Promise.reject('3错误了');
}).then(()=>{
console.log('3');
}).then(()=>{
console.log('4');
}).catch((err)=>{
console.log(err);
})
//1
//2
//3 错误了
catch方法也是有返回值的，返回一个resolve状态的promise
var P1 = new Promise((resolved,rejected)=>{
resolved('start count!');
})
P1.then((data)=>{
console.log(data);
}).then(()=>{
console.log('1');
}).then(()=>{
console.log('2');
return Promise.reject('3错误了');
}).then(()=>{
console.log('3');
}).then(()=>{
console.log('4');
}).catch((err)=>{
console.log(err);
}).then(()=>{
console.log('5');
});
打印结果： 1、2、3错误了、5
Promise.all
函数执行all方法，完成后返回一个数组，并在resolve中接收这个数组
例：
Promise.all([
$.ajax(...),
$.ajax(...),
$.ajax(...)
]).then(arr=>{
console.log(arr);
},(res)=>{
alert("错误: "+res);
});
如果有一个错误了，那么Promise.all会在catch中处理第一个出现错误情况（唯一），其余错误不处理
var a1 = new Promise((resolved,rejected)=>{
setTimeout(()=>{
resolved('A1');
},1300);
});
var a2 = new Promise((resolved,rejected)=>{
setTimeout(()=>{
//resolved('A2');
rejected('A2 失败')
},600);
});
var a3 = new Promise((resolved,rejected)=>{
setTimeout(()=>{
//resolved('A3');
rejected('A3 失败');
},900);
});
var allP = Promise.all([a1,a2,a3]);
allP.then((args)=>{
console.log('-----------success-------------')
args.forEach((item)=>{
console.log(item);
})
},(err)=>{
console.log('------------failed------------')
console.log(err);
});
//------------failed------------
//A2 失败
正确的分支不走，且错误的情况，只处理第一个出现的
Promise.race
Promise集合中，哪个promise先完成，就处理谁，其余不操作
var a1 = new Promise((resolved,rejected)=>{
setTimeout(()=>{
resolved('A1');
},1300);
});
var a2 = new Promise((resolved,rejected)=>{
setTimeout(()=>{
resolved('A2');
},600);
});
var a3 = new Promise((resolved,rejected)=>{
setTimeout(()=>{
resolved('A3');
},900);
});
var allP = Promise.race([a1,a2,a3]);
allP.then((args)=>{
console.log('-----------success-------------')
console.log(args);
},(err)=>{
console.log('------------failed------------')
console.log(err);
});
//-----------success-------------
//A2
async await
概述：
ES8 2017 新增
使用同步的方式，执行异步操作
例：
async function fn1(){
//存在异步依赖关系
//根据某个异步结果，按照特定逻辑，执行后续异步操作
let data1 = await $.get({url:'xxx',dataType:'json'});
if(data1>10){
let data2 = await $.get({url:'xxx',dataType:'json'});
}else{
let data3 = await $.get({url:'xxx',dataType:'json'});
}
console.log(data1,data2,data3)
}
代码解释：
执行第一个回调函数获取数据data1, 判断data1的情况，进而进行后续的异步操作
优点：
使用同步的方式，书写异步操作内容