【Web全栈课程三】ES6特性介绍(下)

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【Web全栈课程三】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:wamp64www
本地网络地址:http://localhost/

Ajax发送请求
缺点:异步请求逻辑和结果处理逻辑耦合在一起,不便于复用和书写

【Web全栈课程三】ES6特性介绍(下)

Promise:

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

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

【Web全栈课程三】ES6特性介绍(下)

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

【Web全栈课程三】ES6特性介绍(下)

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

结果如下:

【Web全栈课程三】ES6特性介绍(下)

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

脚本宝典总结

以上是脚本宝典为你收集整理的【Web全栈课程三】ES6特性介绍(下)全部内容,希望文章能够帮你解决【Web全栈课程三】ES6特性介绍(下)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。