前端学习：ES8中async和await

概述：

async 和 await 两种语法结合可以让异步代码看起来像同步代码一样；
简化异步函数的写法；

1.async函数

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

// async函数：异步函数
async function fn(){
// return 123; // 返回普通数据
// 若报错，则返回的Promise对象也是错误的
// throw new Error("出错啦！");
// 若返回的是Promise对象，那么返回的结果就是Promise对象的结果
return new Promise((resolve,reject)=>{
// resolve("成功啦！");
reject("失败啦！");
})
}
const result = fn();
// console.log(result); // 返回的结果是一个Promise对象
// 调用then方法
result.then(value => {
console.log(value);
},reason => {
console.warn(reason);
});

2.await函数

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

注意：await 必须写在 async 函数中，但是async可以没有await

// 创建promise对象
        const p = new Promise((resolve, reject) => {
            resolve("成功的值");
        })

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

        // 调用函数
        main();

由上述代码运行的结果可以看出，await运行的结果就是promise成功的值。

 // 创建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();

从上述代码可以看出，promise失败了需要通过try...catch进行捕获。

3.async与await结合读取文件

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

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

// 读取【插秧诗】
function readChaYang() {
    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 chayangshi = await readChaYang();
    // 获取观书有感内容
    let guanshu = await readGuanShu();

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

main();

4.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 测试
        async function main() {
            // 发送AJAX请求
            let result = await sendAJAX("https://api.apiopen.top/getJoke");
            console.log(result);
        }

        main();