ES8 | async和await

async和await

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

async函数

async函数的返回值是promise对象
promise对象的结果由async函数执行的返回值决定

---

1.返回的结果不是一个promise类型的对象，则这个函数的返回结果是一个成功的Promise对象

    <script>
        async function fn() {
            // 返回一个字符串
            return 'HAHA';
        }
        const result = fn();
        console.log(result);
    </script>

2. 抛出错误，返回的结果是一个失败的Promise

    <script>
        async function fn() {
            // 抛出错误，返回的结果是一个失败的Promise
            throw new Error('出错了')
        }
        const result = fn();
        console.log(result);
    </script>

3. 返回的结果是一个Promise对象，如果Promise是成功的，那么函数就返回成功的内容
如果是失败的，就返回失败的内容

    <script>
        async function fn() {
            // 返回的结果是一个Promise对象
            return new Promise((resolve,reject)=>{
                // resolve('成功的数据');
                reject('失败了');
            })
        }
        const result = fn();
        console.log(result);
    </script>

await 表达式

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

    <script>
        // 创建 Promise 对象
        const p = new Promise((resolve, reject) => {
            // resolve('成功的值');
            reject('我失败了')
        })
        //  await 必须写在 async 函数中
        async function main() {
            try {
                let result = await p;
                console.log(result); // await 返回的是promise 成功的值，不返回失败的值
            } catch (e) {
                // await 的promise 失败了，就会抛出异常，需要通过try...catch捕获处理
                console.log(e);
            }
        }
        // 调用函数main
        main();
    </script>

async 和await 结合读取文件

// 1. 引入fs模块
const { log } = require('console');
const fs = require('fs');

// 2. 读取【为学】
// 返回的都是promise对象
function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/为学.md', (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        })
    })
}
// 3. 读取【插秧诗】
// 返回的都是promise对象
function readChaYangShi() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/插秧诗.md', (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        })
    })
}

// 4. 读取【观书有感】
// 返回的都是promise对象
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 请求

    <script>
        // 发起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 方法测试
        const result = 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();
    </script>