async与await的用法和理解async 函数 async函数的返回值为promise对象 promise对象的结果

async 函数

async函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
和then()的返回规则一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async函数</title>
</head>
<body>
    <script>
        async function main(){
            //1. 如果返回值是一个非Promise类型的数据
            // return 521;
            //2. 如果返回的是一个Promise对象
            // return new Promise((resolve, reject) => {
            //     // resolve('OK');//结果为：fulfilled OK
            //     reject('Error');//结果为：rejected Error
            // });
            //3. 抛出异常
            throw "Oh NO";//结果为：rejected oh NO
        }

        let result = main();
        console.log(result);
    </script>
</body>
</html>

await 表达式

await必须写在async函数中, 但async函数中可以没有await。
await右侧的表达式一般为promise对象, 但也可以是其它的值。
如果表达式是promise对象, await返回的是promise成功的值；如果await的promise失败了, 就会抛出异常, 需要通过try...catch捕获处理。
如果表达式是其它值, 直接将此值作为await的返回值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>await</title>
</head>
<body>
    <script>
        async function main(){
            let p = new Promise((resolve, reject) => {
                // resolve('OK');
                reject('Error');
            })
            //1. 右侧为promise的情况
            // let res = await p;
            //2. 右侧为其他类型的数据
            // let res2 = await 20;
            //3. 如果promise是失败的状态
            try{
                let res3 = await p;
            }catch(e){
                console.log(e);
            }
        }
        main();
    </script>
</body>
</html>

async 与 await结合读取文件

//async_await.js:
//执行方式：node async_await.js
const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);

//1.回调函数的方式 
// fs.readFile('./resource/1.html', (err, data1) => {
//     if(err) throw err;
//     fs.readFile('./resource/2.html', (err, data2) => {
//         if(err) throw err;
//         fs.readFile('./resource/3.html', (err, data3) => {
//             if(err) throw err;
//             console.log(data1 + data2 + data3);
//         });
//     });
// });

//2.async 与 await方式
async function main(){
    try{
        //读取文件的内容
        let data1 = await mineReadFile('./resource/1x.html');//async 与 await相比回调函数方式的优势在于错误处理比较方便
        let data2 = await mineReadFile('./resource/2.html');
        let data3 = await mineReadFile('./resource/3.html');
        console.log(data1 + data2 + data3);
    }catch(e){
        console.log(e.code);
    }
}
main();

async与await结合发送AJAX请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async与await结合发送AJAX</title>
</head>
<body>
    <button id="btn">点击获取段子</button>
    <script>
        //axios
        function sendAJAX(url){
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                xhr.open("GET", url);
                xhr.send();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断成功
                        if(xhr.status >= 200 && xhr.status < 300){
                            //成功的结果
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });
        }
        //段子接口地址 https://api.apiopen.top/getJoke
        let btn = document.querySelector('#btn');
        btn.addEventListener('click',async function(){
            //获取段子信息
            let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
            console.log(duanzi);
            //console.log(duanzi.result[0].text);
        });
    </script>
</body>
</html>

在这里插入图片描述