es6--async函数和类

async函数

async函数本质上就是 Generator 函数的语法糖。

真正意义上的解决异步回调问题的方案，可以用同步的写法去写异步代码。

代码案例：

        let p1=new Promise((resolve,reject)=>{});
        let p2=new Promise((resolve,reject)=>{});
        let p3=new Promise((resolve,reject)=>{});

        // p1.then(rst=>{
        //     //一堆逻辑 forEach(item=>{})
        //     return p2;
        // }).then(rst=>{
        //     //一堆逻辑
        //     return p3
        // })

        async function fn(){
            await p1;
            await p2;
            await p3;
        }

1.async函数基本用法

通过async关键字来修饰函数，

函数就变成了异步函数.

async函数的返回值为：promise;async函数的return的内容，会成为promise成功状态的数据

代码案例：

        //async函数
        async function fn1() {
            console.log(1);
        }


        async function fn2() {
            console.log(2);
            return 'hello';
        }

        // let v1=fn1();
        // console.log(v1);//Promise {<fulfilled>: undefined}
        let rst = fn2();
        console.log(rst);//Promise {<fulfilled>: 'hello'}

        rst.then(data => {
            console.log(data);
        }).catch(err=>{
            console.log(err);
        })

2.await

await是等待的意思。

1)await必须用于async函数内部

2）await具有等待异步代码执行的功能

3）await可以解析promise成功的结果(不能解析失败的结果)

async function fn(){
   await 异步代码;//等待异步代码执行
}

代码案例： 

  async function fn1() {
            console.log(1);
            return 'hello';
        }

        // fn1().then(rst=>{//promise成功的结果
        //     console.log(rst);
        // })

        // await fn1();//报错

        async function getRst() {
            let v = await fn1();//解析promise成功的结果，赋值给变量v
            console.log(v);
        }

await搭配promise

        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(10);
            }, 1000);
        });

        // p1.then(rst=>{}).catch(err=>{})//传统方案

        async function fn() {
            let v = await p1;//解析promise成功的解构
            console.log(v);
        }

        fn();

await遇到promise失败的状态：

        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve(10);
                reject(100)
            }, 1000);
        });

        // p1.then(rst=>{}).catch(err=>{})//传统方案

        //解决方案一：
        async function fn() {
            try {
                let v = await p1;//解析promise成功的解构
                console.log(v);
            } catch (e) {
                console.log('收到错误：', e);
            }
        }
        //解决方案二：
        async function fn(){
            let v=await p1.catch(err=>{//捕获错误、异常、失败
                console.log(err);
            });
            console.log(v);
        }

3.应用

解决回调地狱

代码案例：

 let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(10)
            }, 1000);
        });

        let p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(20)
            }, 500);
        });

        let p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(30)
            }, 2000);
        });

        async function fn(){
            let v1=await p1;
            let v2=await p2;
            let v3=await p3;

            console.log(v1);
            console.log(v2);
            console.log(v3);
        }

        fn();

类

在ES6中新增了class关键字，可以定义类.

• 类 对事物的一个分类 ，使用class关键字来定义 .类是一种更高级别的封装

• 对象 类的实例化

1.class的基本使用

语法：

        //Person类
        class Person {
            //构造器  完成类的属性的初始化
            //构造器不能被主动调用
            //构造器会在类被实例化时，自动执行
            constructor(name, age, idCard) {//属性
                this.name = name;
                this.age = age;
                this.idCard = idCard;
            }

            say() {//注意：方法依然位于原型上
                console.log(this.name + "哈哈大笑");
            }
        }

        let p = new Person('李狗子',18,'4102432432');//类的实例化
        console.log(p);

2.constructor

构造器。

每一个类都需要有一个构造器。若没有显式的声明，则系统会自动添加一个无参的构造器。

构造器不能主动调用；当类被实例化的时候，会自动的执行构造器

3.成员和静态

属性：

• 静态属性 类的属性

• 成员属性 对象的属性

方法：

• 静态方法 类的方法

• 成员方法 对象的方法

   class Man {
              static leg='两条腿';//静态属性
              constructor(id,name) { //成员属性
                  this.id=id;
                  this.name=name;
              }
  
              say() {//成员方法
                  console.log(111);
              }
  
              static walk() {//静态方法
                  console.log(2222);
              }
          }
  
          // Man.say();//报错
          // new Man().say();//对象调用
  
          Man.walk();
          // new Man().walk();//报错
  
          let m=new Man(100,'王小二');
          console.log(m.id);//成员属性
          // console.log(Man.id);
          console.log(Man.leg);
          console.log(m.leg);//undefine