【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发送请求
缺点:异步请求逻辑和结果处理逻辑耦合在一起,不便于复用和书写
clipboard.png

Promise:

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

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

clipboard.png

补充一下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。
clipboard.png

小结:
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);
    }
  })();

结果如下:
clipboard.png

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

阅读 1.3k

一只萌萌的程序媛妹子,踏入前端领域不久,希望大家多指导,欢迎大家多多指出问题

69 声望
11 粉丝
0 条评论
你知道吗?

一只萌萌的程序媛妹子,踏入前端领域不久,希望大家多指导,欢迎大家多多指出问题

69 声望
11 粉丝
宣传栏