B站小马哥ES6（三）

一、Promise对象

• 相当于一个容器,保存着未来才会结束的事件（异步操作）的一个结果
• 各种异步操作都可以用同样的方法进行处理

1.特点

• 对象的状态不受外接影响，处理异步操作有三个状态，Pending(进行) Resolved（成功） Rejected（失败）
• 一旦状态发生改变，不会再变，任何时候都可以得到这个结果

let pro = new Promise(function(resolved,rejected){
    let res = {
        code:201,
        data:{
            name:'小明'
        },
        error:'失败'
    }
    setTimeout(()=>{
        if(res.code === 200){
            resolved(res.data)
        }else{
            rejected(res.error)
        }
    },1000)
})

pro.then((val)=>{
    console.log(val);
},(err)=>{
    console.log(err)
})

2.then（）方法

• 第一个参数是resole回调函数，第二个参数是可选的，是reject状态的回调
• tnen()返回的是一个新的Promise实例，可以采用链式编程

.then(null,err=>{
    
})

等价于

catch(err=>{
    
})

3.resolve()方法

• 将现有的任何对象转换为Promise对象

let p = Promise.resolve('foo')
//等价
let p = new Promise(resolve=>resolve('foo'));
p.then((data)=>{
    console.log(data)
})

4.all()方法

• 应用:一些游戏类的素材比较多，要都加载完成了以后才显示在页面上面

let promise1 = new Promise((resolve,reject)=>{});
let promise2 = new Promise((resolve,reject)=>{});
let promise3 = new Promise((resolve,reject)=>{});
let p4 = Promise.all([promise1,promise2,promise3])
p4.then(()=>{
    //都成功才为成功
}).catch({
    //一个失败则失败
})

5.race()方法

• 某个异步请求设置超时事件，并且在超时后执行相应的操作

Promise.race([requestImg('images/1.png'),timeout()]).then(data=>{
    console.log(data)
}).catch(err=>{
    console.log(err)
})
//超时了返回error

6.finally() 和done()

• 不管成功和失败都会走，用的少

二、async的用法

1. 作用

使得异步操作更加方便

2.基本操作

• async它会返回一个Promise对象 then catch
• async是Generator的一个语法糖

async function f(){
    let s = await 'hello async';
    let data = await s.split('');
    return data;
}
f().then(v=>{console.log(v)});
//所有await执行结束后才返回

三、class类

class Person{
    //创建实例立即执行
    constructor(name,age){
        this.name = name
        this.age = age
    }
    sayName(){
        return this.name
    }
    sayAge(){
        return this.age
    }
}
let p1 = new Person('小明',20)
console.log(p1)

也可以通过Object.assin()方法,一次性向类中添加多个方法

class Person{
    //创建实例立即执行
    constructor(name,age){
        this.name = name
        this.age = age
    }
}
Object.assign(Person.prototype,{
	    sayName(){
	    return this.name
	},
	    sayAge(){
	    return this.age
	}
})
let p1 = new Person('小明',20)
console.log(p1)

四、类的继承

• 会继承父类的属性和方法，子类有自己的方法，也可以重写父类的方法

class Animal{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    sayName(){
        return this.name
    }
    sayAge(){
        return this.age
    }
}

class Dog extends Animal{
    constructor(name,age,color){
        super(name,age)
        this.color = color
    }
}

let p1 = new Dog('小明',20,'红色')
console.log(p1)

五、Module模块的使用

• es6模块功能主要有两个命令构成：export和import
• export用于规定模块的对外接口
• import用于输入其他模块提供的功能（导入）
• 一个模块就是独立的文件

暴露

export const nama = '小明'
export const age = 20
export function sayName(){
	return 'my name is 小马哥'
}

引入

import {name,age,sayName} from './modules/index.js'

用到default暴露的时候在一个js文件只能出现一次

export default obj;

接收

import obj from './modules/index.js'