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

ES6特性介绍（下）

ES6新的标准，新的语法特征：
1、变量/赋值
2、函数
3、数组/json
4、字符串
5、面向对象
6、Promise
7、generator
8、ES7:async/await

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

6、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=>{});

7、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

3、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个点让人疑惑
1、返回值：yield 55返回给第一个next了
2、接受参数：let a = yield接收的是第二个next传递进来的参数

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

小结：
1、箭头函数不能写generator函数
2、generator只是一个过渡，从例子中看到yield的使用有很多约束，也不符合我们常用的使用习惯。一般使用async/await

8、ES7：async/await

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

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

1、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();

2、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);
    }
  })();

结果如下：

小结：
1、await一定使用在async函数中
2、await必须等待一个异步操作，通常等待一个promise