ES8特性

async函数和await表达式

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

async函数

• async函数的返回值为promise对象
• promise对象的结果由async函数的返回值决定

<script>
    async function fn() {
        //返回成功的Promise
        return '尚硅谷';
        //抛出错误，返回的结果是一个失败的Promise
        throw new Error('出错了');
        //自定义的Promise
        return new Promise((resolve, reject) => {
            resolve('成功的返回')
            resolve('失败的返回')
        })
    }

    let result = fn();
    console.log(result);
</script>

await表达式

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

• 返回成功

<script>
    //await必须要放在async函数中
    const p=new Promise((resolve, reject) => {
        resolve('用户数据');
    })
    async function fn() {
        let result = await p;
        console.log(result);
    }
    fn();
</script>

• 返回失败

<script>
    //await必须要放在async函数中
    const p=new Promise((resolve, reject) => {
        reject('返回失败')
    })
    async function fn() {
        try {
            let result = await p;
            console.log(result);
        }catch (e){
            console.log(e);
        }
    }
    fn();
</script>

async与await结合读取文件内容

const fs=require('fs');

//读取第一个文件

function oneFile() {
    return new Promise((resolve, reject) => {
        fs.readFile('../resources/aa.md',(err, data) => {
            if (err){
                reject(err);
            }else {
                resolve(data);
            }
        })
    })
}
function twoFile() {
    return new Promise((resolve, reject) => {
        fs.readFile('../resources/bb.md',(err, data) => {
            if (err){
                reject(err);
            }else {
                resolve(data);
            }
        })
    })
}
function threeFile() {
    return new Promise((resolve, reject) => {
        fs.readFile('../resources/cc.md',(err, data) => {
            if (err){
                reject(err);
            }else {
                resolve(data);
            }
        })
    })
}

async function main() {
    let oneResult = await oneFile();
    let twoResult = await twoFile();
    let threeResult = await threeFile();

    console.log(oneResult.toString());
    console.log(threeResult.toString());
    console.log(threeResult.toString());
}

main();

async与await结合发送AJax请求

<script>
    //发送AJAX请求，返回的结果是Promise对象
    function sendAjax(url) {
        return new Promise((resolve, reject) => {
            const x=new XMLHttpRequest();
            //初始化
            x.open('GET',url);
            //发送
            x.send();
            x.onreadystatechange=function () {
                if (x.readyState===4){
                    if (x.status>=200&&x.status<300){
                        //成功啦
                        resolve(x.response);
                    }else {
                        reject(x.status);
                    }
                }
            }
        })
    }

    async function main() {
       let result = await sendAjax('https://www.layui.com/demo/table/user/?page=1&limit=30');
        console.log(result);
    }
    main();
</script>

对象方法扩展