资讯专栏INFORMATION COLUMN

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

wangshijun / 1305人阅读

摘要:示例运行函数弹出弹出函数接收参数,返回值。其中,返回一个对象,是的返回值,代表函数是否执行完成。

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107900.html

相关文章

  • Web全栈课程二】ES6特性介绍(上)

    摘要:原因中,定义的变量没有块级作用域,在第一个中循环后已经是,里面的执行的时候弹出的就是。 ES6特性介绍(上) ECMAScript(简称ECMA、ES),ES6也被称为ECMAScript 2015JavaScript是ECMAScript的一种,但是目前实现ECMAScript标准的仅JavaScript ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符...

    kevin 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    Carson 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    muzhuyu 评论0 收藏0

发表评论

0条评论

wangshijun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<