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的编译工作。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容