1. Promise
-
承诺消除异步操作，用同步一样的方式，来书写异步代码
-
Promise.all：如果参数中 promise 有一个失败，此实例回调失败
-
Promise.race：如果参数中某个promise解决或拒绝，返回的 promise就会解决或拒绝。
-
Promise.allSettled:当Promise全部处理完成后我们可以拿到每个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* 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'});
}
//生成、...
});
