ES8：async 和 await

一、async 函数

1. return的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象

//async 函数
async function fn(){
    // 返回一个字符串
    return 'aaa';
}

const result = fn();
console.log(result);

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

//async 函数
async function fn(){
    return;
}

const result = fn();
console.log(result);

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

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

//async 函数
async function fn(){
    throw new Error('出错啦!');
}

const result = fn();
console.log(result);

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

3. 返回的结果如果是一个 Promise 对象

//async 函数
async function fn(){
    //返回的结果如果是一个 Promise 对象
    return new Promise((resolve, reject)=>{
        resolve('成功的数据');
        // reject("失败的错误");
    });
}

const result = fn();
console.log(result);

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

//async 函数
async function fn(){
    //返回的结果如果是一个 Promise 对象
    return new Promise((resolve, reject)=>{
        // resolve('成功的数据');
        reject("失败的错误");
    });
}

const result = fn();
console.log(result);

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

二、await 表达式

1. 成功

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

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

2. 失败

//创建 promise 对象
const p = new Promise((resolve, reject) => {
    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请求

这里用的是视频里的接口。

<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 方法测试
    // 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");
        //再次测试
        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();
    
</script>