【Web全栈课程三】ES6特性介绍（下）

ES6特性介绍（下）

ES6新的标准，新的语法特征：
一、变量/赋值
二、函数
三、数组/json
四、字符串
五、面向对象
六、Promise
七、generator
八、ES7:async/await

《【Web全栈课程二】ES6特性介绍（上）》见：https://segmentfault.com/a/11...

六、Promise

根本做用，解决异步的操做，将异步操做写法同步化，是es6提供给咱们的语法糖（内部实现依旧是异步）
同步-串行 简单、方便 页面假死的现象
异步-并发 性能高、体验好

使用wamp做为本地服务器使用
【补充：wamp用法】ajax获取数据须要使用服务器，项目都放在www里面，访问时按照以下对应关系转换
本地物理地址：c:\wamp64\www
本地网络地址：http://localhost/

Ajax发送请求
缺点：异步请求逻辑和结果处理逻辑耦合在一块儿，不便于复用和书写

Promise：

同步的简单写法实现异步,获取一条url数据。Promise在ES6中被统一规范，由浏览器直接支持，它最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离

let p =new Promise((resolve, reject) => {
  resolve();
  reject();
});
p.then(success=>{},err=>{});

补充一下ajax和Promise混用的原理，咱们能够将ajax操做的返回值打印出来，发现里面有then方法、catch方法，其实它就是一个Promise对象。那么咱们为何还要使用Promise？promise的all和race能很好地处理多条异步操做。

Promise.all：接收promise数组，在全部异步操做执行完后才执行回调。
Promise.race：接收promise数组，只要有一个异步操做执行完毕就执行回调。

Promise.all([
  $.ajax('/banner_data'),
  $.ajax('/item_data'),
  $.ajax('/users_data'),
  $.ajax('/news_data'),
]).then(arrs=>{
  let [banners,items,users,news]=arrs;
},err=>{});

七、generator 生成器

promise只能提供race和all的逻辑操做，若是咱们要实现更加复杂的异步操做，例如等待a异步操做完成后根据a的结果选择执行b或者c，使用promise就须要写不少的嵌套，又不能知足咱们代码的高可用和可读性。
这里先给你们介绍generator提供的解决方案，实际使用中generator并不方便，咱们通常使用async/await，后面会提到。

1.generator函数前面有*号

function show(){} //普通函数
    function *show1(){}//generator函数

2.generator函数的特色是可以暂停，等待某个动做（异步操做）完成后继续执行。何时暂停呢？咱们须要告诉它暂停的时间点，咱们经过yield告诉generator函数暂停，yield也只能在generator函数使用。

//generator函数
    function *show(){
        alert('aaa');
        yield; //函数暂停
        alert('bbb');
    }

    show();

咱们直接调用show()，会发现界面没有任何效果，和咱们习惯的函数顺序执行使用习惯并不相同。generator函数返回的是一个generator对象，须要next()才能运行generator函数。示例：

// 运行generator函数
    let gen = show();
    gen.next(); //弹出aaa
    gen.next(); //弹出bbb

三、generator函数接收参数，返回值。其中，gen.next()返回一个对象，value是yield的返回值，done表明函数是否执行完成。

function *show(){
      alert('aaa');
      //let a = yield 接收next给的参数; yield 55 返回值55
      let a = yield 55;
      alert('bbb'+','+a);//弹出bbb,23
    }
    let gen=show();
    let res1=gen.next();console.log(res1);//{value: 55, done: false}
    let res2=gen.next(23);console.log(res2);//{value: undefined, done: true}

以上执行，有2个点让人疑惑
一、返回值：yield 55返回给第一个next了
二、接受参数：let a = yield接收的是第二个next传递进来的参数

咱们用下面这张图来很好的解释这个缘由，红色圈出来的部分是第一个next的范围，绿色圈出来的是第二个next的范围。也就是说yield返回属于上一个next，接收参数属于下一个next。

小结：
一、箭头函数不能写generator函数
二、generator只是一个过渡，从例子中看到yield的使用有不少约束，也不符合咱们经常使用的使用习惯。通常使用async/await

八、ES7：async/await

async/await也能够在执行中暂停，await等待一个异步操做完成后再继续往下执行，它将异步操做同步化。await必定使用在async函数中，先来直接看下使用方式

async function show() {
    alert('aaa');
    //12是一个数值，不是异步操做，不会进行等待
    await 12;
    alert('bbb');
  }
  show();

一、await后面跟一个异步操做，不然不会进行等待。如上代码就不会进行等待。
setTimeout不是异步操做，可是若是包成promise，await就会认为它是一个异步操做，以下代码弹出aaa后会等待2s后再弹出bbb。

function sleep(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{resolve();},2000);
    });
  }
  async function show() {
    alert('aaa');
    await sleep();//等待2s
    alert('bbb');
  }
  show();

二、await进行逻辑操做
咱们在1.txt文件中存放{"a":12,"b":5}，实现若是a+b<10则获取2.txt，不然获取3.txt，能够预见到结果会进去获取3.txt的分支。

//用箭头函数写async函数,匿名函数
  (async ()=>{
    let data1 = await $.ajax({url:'../datas/1.txt',dataType:'json'});
    //获取data1的异步请求已经执行完成
    if(data1.a+data1.b<10){
      let data2 =  await $.ajax({url:'../datas/2.txt',dataType:'json'});
      console.log('2.txt');
      console.log(data2);
    } else {
      let data3 =  await $.ajax({url:'../datas/3.txt',dataType:'json'});
      console.log('3.txt');
      console.log(data3);
    }
  })();

结果以下：

小结：一、await必定使用在async函数中二、await必须等待一个异步操做，一般等待一个promise