• 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'});
    }
     
    //生成、...
    });

  • 相关阅读:
    table-layout:fixed 布局注意事项
    resize 按钮不会被伪元素遮盖
    background-size:100% 100% 时 background-position: % 失效
    利用 background 和 filter 模糊指定区域
    window.location.href = window.location.href 跳转无反应 a 超链接 onclick 点击跳转无反应
    如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
    .clear 万能清除浮动
    个人博客开通了
    Mysql The user specified as a definer ('test'@'%') does not exist
    MERGE INTO 解决大数据量复杂操作更新慢的问题
  • 原文地址:https://www.cnblogs.com/silent-190/p/14343663.html
Copyright © 2020-2023  润新知