1. Promise
- 承诺消除异步操作,用同步一样的方式,来书写异步代码
- Promise.all:如果参数中 promise 有一个失败,此实例回调失败
- Promise.race:如果参数中某个promise解决或拒绝,返回的 promise就会解决或拒绝。
- Promise.allSettled:当Promise全部处理完成后我们可以拿到每个Promise的状态, 而不管其是否处理成功.
- 异步:操作之间没啥关系,同时进行多个操作;缺点:代码更复杂
- 有了Promise之后的异步:
- Promise.all([$.ajax(),$.ajax()]).then(results=>{},err=>{})
- Promise.all(['ajax信息']).then('成功函数','失败函数')
- Promise.all([$.ajax({url:'data/arr.txt',dataType:'json'})]).then(function (arr) {alert(arr)},function (err) {alert(err)})
- 有了Promise之后的异步:
-
同步:同时只能做一件事;优点:代码更简单
-
Promise.all 缺陷:Promise.allSettled可以解决
-
实例
const p1 = new Promise((resolve, reject) => {
resolve('任务一')
}).then(data => {
console.log(data)
})
const p2 = new Promise((resolve,reject) => {
setTimeout(() => {//定时器
resolve('任务二')
},200)
}).then(data => {
console.log(data)
})
console.log('主线程任务')
Promise.all([p1,p2])//先执行all中所有任务, 执行完成之后再去执行后面的任务
.then(data => {
console.log('任务三')
})
//输出结果:主线程任务 任务一 任务二 任务三
Promise.race([p1,p2])//任务快的先输出
.then(data => {
console.log('任务三')
})
//输出结果:主线程任务 任务一 任务三 任务二
Promise.allSettled([p1,p2])
.then(data => {
console.log('任务三')
})
2. Generator
- 概念,在function关键字后面写一个*,表示一个generator函数,generator通过yield关键字来定义任务
- 普通函数:执行过程中不能停止
- generator函数:执行过程中可以随时停止
-
function *函数(){
代码...
yield ajax(xxx); //返回结果后才会再执行代码...}
实例
function* p1(){
yield '任务1';
yield '任务2';
yield '任务3';
yield '任务4';
yield '任务5';
yield function* p2() {
yield '任务7'
}
return '任务6'
}
var p = p1();
//一次p.next()只执行一次
console.log(p.next())//{ value: '任务1', done: false }
console.log(p.next())//{ value: '任务2', done: false }
console.log(p.next())//{ value: '任务3', done: false }
console.log(p.next())//{ value: '任务4', done: false }
console.log(p.next())//{ value: '任务5', done: false }
console.log(p.next())//{ value: underfined, done: false }
console.log(p.next())//{ value: '任务6', done: false }
console.log(p.next())//{ value: underfined, done: false }
3. 异步Promise、Generator
1. Promise
Promise.all([
$.ajax({url: 'getUserData', dataType: 'json'})
]).then(results=>{
let userData=results[0];
if(userData.type=='VIP'){
Promise.all([
$.ajax({url: 'getVIPItems', dataType: 'json'})
]).then(results=>{
let items=results[0];
//生成列表、显示...
}, err=>{
alert('错了');
});
}else{
Promise.all([
$.ajax({url: 'getItems', dataType: 'json'})
]).then(results=>{
let items=results[0];
//生成列表、显示...
}, err=>{
alert('错了');
});
}
}, err=>{
alert('失败');
});
2. Generator
runner(function *(){
let userData=yield $.ajax({url: 'getUserData', dataType: 'json'});
if(userData.type=='VIP'){
let items=yield $.ajax({url: 'getVIPItems', dataType: 'json'});
}else{
let items=yield $.ajax({url: 'getItems', dataType: 'json'});
}
//生成、...
});