ES8语法async与await

最新推荐文章于 2024-06-15 11:46:27 发布

@王坤

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量512

点赞数 6

分类专栏： Vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_52231465/article/details/134629193

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

一、async函数

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

async function fn() {
	// 返回一个字符串
	return '字符串'；
	// 返回的结果不是一个Promise类型的对象，返回的结果就是成功的Promise对象。
	return;
	// 抛出错误，返回的结果是一个失败的Promise
	throw new Error('出错啦！');
	// 返回的结果如果是一个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

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

// 创建promise对象
const p = new Promise((resolve, reject) => {
    // resolve("用户数据");
    reject("失败!!");
})
// await要放在async函数中
async function main() {
    try {
        let result = await p;
        console.log(result);
    } catch (error) {
        console.log(error);
    }
}

main();

三、async和await结合

// 1.引入js模块
const fs = require('fs');

// 读取“.md”文件
function weixue() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resourse/为学.md', (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        });
    });
}


function yougan() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resourse/有感.md', (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        });
    });
}
function guankan() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resourse/观看.md', (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data);
        });
    });
}

// 2.声明一个async函数
async function main() {
    // 获取“.md”文件的内容
    // await返回的结果是成功的值
    let Weixue = await weixue();
    let Yougan = await yougan();
    let Guankan = await guankan();
    

    console.log(Weixue.toString());
    console.log(Yougan.toString());
    console.log(Guankan.toString());
    
}

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>Document</title>
</head>

<body>
    <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);
                        }
                    }
                }
            })
        }

        // 测试1  then方法的使用
        // const result = sendAJAX('https://api.apiopen.top/getJoke').then(value => {
        //     console.log('成功', value);
        // }, reason => {
        //     console.log('失败', reason);
        // });

        // 测试2  async与await的使用  一般用axios请求
        async function main() {
            try {
                // 发送AJAX请求
                const result = await sendAJAX('https://api.apiopen.top/getJoke');
                const tianqi = await sendAJAX('https://v0.yiketianqi.com/life/yearavg');
                console.log('成功', result,'\n', tianqi);
            }
            catch (error) {
                console.log('失败', error);
            }
        }

        main();
    </script>

</body>

</html>