21.ES8新特性

async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样

async 函数

1. async 函数的返回值为 promise 对象
2. promise 对象的结果由 async 函数执行的返回值决定

//async 函数
async function fn(){
    // 返回一个字符串
    //return 'Study';
    // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
    //return;
    //抛出错误, 返回的结果是一个失败的 Promise
    //throw new Error('出错啦!');
    //返回的结果如果是一个 Promise 对象
    return new Promise((resolve, reject)=>{
         resolve('成功的数据');
         // reject("失败的错误");
    });
}
const result = fn();

//调用 then 方法
result.then(value => {
    console.log(value);
}, reason => {
    console.warn(reason);
})

await 表达式

1. await 必须写在 async 函数中
2. await 右侧的表达式一般为 promise 对象
3. await 返回的是 promise 成功的值
4. await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

//创建 promise 对象
const p = new Promise((resolve, reject) => {
    // resolve("用户数据");
    reject("失败啦!");
})

// await 要放在 async 函数中.
async function main() {
    try {
        let result = await p;
        //
        console.log(result);
    } catch (e) {
        console.log(e);
    }
}
//调用函数
main();

//async与await结合读取文件内容

//1. 引入 fs 模块
const fs = require("fs");

//读取『为学』
function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/为学.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readChaYangShi() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readGuanShu() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

//声明一个 async 函数
async function main(){
    //获取为学内容
    let weixue = await readWeiXue();
    //获取插秧诗内容
    let chayang = await readChaYangShi();
    // 获取观书有感
    let guanshu = await readGuanShu();

    console.log(weixue.toString());
    console.log(chayang.toString());
    console.log(guanshu.toString());
}

main();

//async与await结合发送AJAX请求

//发送AJAX请求，返回的结果是Promise对象
function sendAJAX(url){
    return new Promise((resolve,reject)=>{
        //1.创建对象
		const x = new XMLHttpRequest();

        //2.初始化对象
		x.open('GET', url);
        
        //3.发送
		x.send();

        //4.事件绑定
        x.onreadystatechange = function () {
        	if (x.readyState === 4) {
        		if (x.status >= 200 && x.status < 300) {
                    //成功啦
                    resolve(x.response);
                }else{
                    //如果失败
                    reject(x.status);
                }
            }
        }
    })
}

//promise then 方法测试
sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
     console.log(value);
}, reason=>{})

// async 与 await 测试  axios
async function main(){
	//发送 AJAX 请求
    let result = await sendAJAX("https://api.apiopen.top/getJoke");
    //再次测试
    let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')

    console.log(tianqi);
}

main();
        

Object.values 和 Object.entries

1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组
2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

//声明对象
const school = {
    name:"Study",
    cities:['北京','上海','深圳'],
    xueke: ['前端','Java','大数据','运维']
};

//获取对象所有的键
console.log(Object.keys(school));//['name','cities','xueke']
//获取对象所有的值
console.log(Object.values(school));//["Study",Array(3),Array(4)]
//entries
console.log(Object.entries(school));//
//创建 Map
const m = new Map(Object.entries(school));
console.log(m.get('cities'));//['北京','上海','深圳']

//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));

const obj = Object.create(null, {
     name: {
        //设置值
        value: 'Study',
        //属性特性
        writable: true,
        configurable: true,
        enumerable: true
	} 
});