js异步流程的promise及generator

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.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'});

}

 

//生成、...

});