第 4 章 ECMASript 8 新特性

4.1 async 和 await

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

4.1.1 async 函数

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

• 如果返回的是一个成功的Promise，result的结果就是一个成功的Promise
• 如果返回的是一个失败的Promise，result的结果就是一个失败的Promise
• 如果函数内部抛出错误，那么结果就是一个失败的Promise
• 如果返回的是非Promise类型的数据，那么结果就是一个成功的Promise

// async 函数
async function fn() {
    // 返回一个字符串
    // return 'abc';
    // 返回的结果不是一个Promise 类型的对象，返回的结果就是成功的Promise对象
    // 抛出错误，返回的结果是一个失败的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);
})

4.1.2 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();

4.1.3 async与await结合案例

4.1.3.1 读取文件内容

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

// 读取【为学】
function readWeixue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/weixue.txt", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        })
    })
}

// 读取【插秧诗】
function readChayangshi() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/chayangshi.txt", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        })
    })
}

// 读取【观书有感】
function readGuanshu() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/guanshu.txt", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        })
    })
}

// 声明一个 async 函数
async function main() {
    // 获取为学内容
    let weixue = await readWeixue();
    // 获取插秧诗内容
    let chayangshi = await readChayangshi();
    // 获取观书有感内容
    let guanshu = await readGuanshu();
    // 输出内容
    console.log(weixue.toString());
    console.log(chayangshi.toString());
    console.log(guanshu.toString());
}

main();

4.1.3.2 发送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);
                }
            }
        }
    })
}

// asycn 与 await 测试
async function main() {
    let result = await sendAJAX("接口地址");
    console.log(result);
}

main();

// promise then 方法测试
sendAJAX("接口地址").then(value => {
    console.log(value);
}, reason => {})

4.2 Object.values 和 Object.entries

// 声明对象
const school = {
    name: 'abc',
    cities: ['北京', '上海', '广州'],
    xueke: ['语文', '数学', '英语']
};

1. Object.keys()方法返回一个给定对象的所有可枚举键名的数组

// 获取对象所有的键
const keys = Object.keys(school);
console.log(keys);

2. Object.values()方法返回一个给定对象的所有可枚举属性值的数组

// 获取对象所有的值
const values = Object.values(school);
console.log(values);

3. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

// entries
const entries = Object.entries(school);
console.log(entries);
// 因为是键值对，所以可以用Map接收
const map = new Map(entries);
console.log(map);

4. Object.getOwnPropertyDescriptors，该方法返回指定对象所有自身属性的描述对象

// 对象属性的描述对象，这个方法就是获取对象属性的描述对象
const descriptor = Object.getOwnPropertyDescriptors(school);
console.log(descriptor);

// 创建一个对象
const obj = Object.create(null, {
    name: {
        // 设置值
        value: 'abc',
        // 属性特性
        writable: true,  // 可写
        enumerable: true, // 可枚举
        configurable: true // 可配置
    }
});