Promise/generator/async与await

promise

    //使用同步的写法,解决异步操作,。(异步-性能高,用户体验更好;同步-更简单,更方便)
    //使用方法:
    let pro = new Promise((reslove,reject)=>{
                $.ajax({
                    url:'1.txt',//1.txt文件中返回json {"a":12,"b":5}
                    dataType:'json',
                    success(json){
                        reslove(json)//成功会调用reslove函数
                    },
                    error(err){
                        reject(err) //失败调用reject函数
                    }
                })  
    })
    //调用方法:(当pro内部函数执行完成之后,就会调用then方法。then方法取代了AJAX中原本的成功与失败方法。)    
    pro.then((json)=>{
        alert("成功")
        },
        (err)=>{
            alert("失败")
        })
    //使用then()方法调用promise,参数为两个函数,第一个函数为成功,第二个函数为失败
    //调用方法(多次调用):
    Promise.all([pro,pro1,pro2]).then((arr)=>{
        alert("成功");
        let[a,a1,a2]=arr;
        },
        (err)=>{
            alert("失败")
        })//pro\pro1\pro2是三个Promise对象。
    //使用all()之后 需要参数对象内部函数全部执行完毕之后,才执行then,成功后返回一个数组,可以用解构赋值来接收为独立的数据。
    //当多个pro对象,有逻辑关系的情况下。需要使用async、await解决。
    //Promise.race()与Promise.all()的区别是,race()是 参数中ajax只要有一个完成即算完成。all()需要参数所有的ajax全部完成才执行成功

    //注:JQ中ajax的返回值就是一个Promise对象。所以ajax也有then方法,用来执行成功与失败。所以Promise.all()中的参数,可以直接放ajax。
    //Promise.all([$.ajax(xxx),$.ajax(xxx),$.ajax(xxx)]).then()//正常执行成功失败的方法。arr为三个ajax的返回数据。

generator 函数 (生成器函数);

普通函数
function show(){}

生成器函数
function *show(){ xxx;yield;xxxx;yield}

生成器函数体中使用 yield实现暂停。

使用生成器函数的对象执行 next()方法 运行生成器函数.

let s = show(); s.next(); 每次调用next都会执行对应次数的yield前的代码。

关于yield

  • yield 可以传参(只能传一个)。
  • yield 也可以返回值(可以返回多个,使用数组返回)。
    //使用next()方法传参 对应次数减一的yield 会接收到这个参数。
    function *show(){ 
        console.log(1);
        let a = yield; 
        console.log(a);
    }
    let s = show();  
    s.next(); //执行输出1
    s.next(2);//第二次调用next 第一个yield接受参数。a=2

    //使用yield 返回数值 第一个yield返回值,第一个next方法接受。
    function *show(){ 
        console.log(1);
        yield 55; 
        console.log(1); 
        return 89
    }
    let s = show();  
    let a = s.next(); // a = 55;
    let aa = s.next();// aa= 89;
    //使用yield 返回数组:
    function *show(){
            console.log(55); 
            yield [1,2,3];
            console.log(89); 
            return 89;
            };
        let s = show();  
        let a = s.next(); 
        let[q,w,e] = a.value;//a不是iterator;a.value是iterator (迭代器)compiler(编译器)
        alert(q)//1
        alert(w)//2
        alert(e)//3
    //结论,因为generator 需要外来的runner.js来配合使用,因为runner.js不统一 不标准,并且generator函数不能写成箭头函数,所以,这货被取代了;

async与await(取代了generator的东西)

//只要在函数前加上async即可 表明这是一个async函数。函数体中使用await代替yield。//调用直接运行函数名即可;
async function show(){}
//await 会判断返回的数据对象,如果不是一个异步操作他就不会停止,例如 await 12;就会直接运行不会出现暂停。
//await 后可以放promise、generator函数,或者另外一个async函数
//async 后的function可以省略,匿名函数 async ()=>{}
async function show(){
    let data = await $ajax(xxx);    
    let data1 = await $ajax(xxx);
    let data2 = await $ajax(xxx);
    console.log(data,data1,data2)
}
show()//data,data1,data2 的数据
//含有逻辑关系的异步
async function show(){
    let data = await $ajax(xxx);
    if(dataxxxx){//如果满足条件走data1
        let data1 = await $ajax(xxx);
        console.log(data1)
    }else{//否则走data2
        let data2 = await $ajax(xxx);
        console.log(data2)
    }
}
show()//输出对应逻辑的数据
//以上是async函数中 ajax返回正常的情况;当ajax返回出错时情况处理,直接在async函数中使用try{}catch(){}包含所有的await的ajax;
//loading层 的使用 直接在async函数中所有await之前开启loading层,之后关闭即可。

关于ES6到ES5的编译,babel的使用.

babel是es next翻译器 也是polyfill工具(对浏览器功能进行填补)

安装流程:

    1. 首先安装node.js→node会顺便下载一个npm(包管理器)在本地→使用npm安装babel-cli
       ps:因为npm下载速度太慢,所以使用国内的淘宝镜像cnpm  http://npm.taobao.org/
       安装完cnpm之后即可使用cnpm命令代替npm命令安装babel-cli
       cli=>command line interface,安装cli之后才可以使命令行支持babel
    2.cmd跳转到想要安装babel的文件夹下(初始化项目);
      运行cmd输入命令符 cnpm -init后
      根据提示依次输入:包名→版本→描述→入口文件→测试命令→git仓库→关键字→作者→遵循license 
      以上选项不填即为空或者默认,完成后在文件夹中会自动创建一个package.json的文件
    3.输入命令符cnpm install --save-dev babel-cli 或者 cnpm install babel-cli -D 
      即可开始安装babel-cli
      安装成功后在package.json文件中多出一行   
      "devDependencies": {
          "babel-cli": "^6.26.0"
      } 
      同路径下多出一个node_modules文件夹,这个文件夹不可以复制移动,否则会失效
      如果包被误删之后,直接在cmd中跳转到package.json所在路径,
      使用命令符cnpm i 即可在package.json中"devDependencies"下记录的包 全部自动下载
    4.在package.json文件中 scripts下添加 "build": "babel src -d lib" 
      作用:可以在命令框中直接使用cnpm run build 来运行cnpm run babel src -d lib
      babel src -d lib命令分析:src为源码所在的包,-d 为输出 lib为编译后文件存放的包 
      翻译:使用babel 将src文件夹下的文件编译到lib 文件夹下。
      ps:此时注意,如果这个文件夹中原本有与要被编译的文档重名的文档,就会被覆盖掉。
    5.在package.json同路径下创建.babelrc文件 内容为
      {
        "presets": ["env"]
      }
      之后在cmd输入命令符cnpm install babel-preset-env -D进行安装
    6.安装成功之后package.json下 "devDependencies"中就多出一个 "babel-preset-env": "^1.6.1"
      此时babel才可以真正完成ES6到ES5的编译工作。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容