async和awit

最新推荐文章于 2023-04-24 00:48:36 发布

蓝胖子20

最新推荐文章于 2023-04-24 00:48:36 发布

阅读量773

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/qq_36142428/article/details/124372960

版权

本文介绍了如何利用async函数和await表达式将异步代码写得更加简洁。通过示例展示了如何用async/await读取多个文件内容，并通过封装的sendAjax函数发送AJAX请求。示例中，每个文件读取和AJAX请求都被转换为Promise，然后在async函数中使用await等待它们完成，确保了代码的同步执行风格。同时，还展示了如何处理await表达式可能抛出的异常。

摘要由CSDN通过智能技术生成

1、async和awit两种方法结合可以让异步代码像同步代码一样

2async函数

1）async函数的返回值为promise对象

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

2await表达式

1）必须写在async函数中

await 必须写在 async 函数中, 但 async 函数中可以没有 await
如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 来捕获处理
await 返回的是promise成功的值
await右侧的表达式一般为pomise
结合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();

封装ajax ----promise

     // 发送 AJAX 请求, 返回的结果是 Promise 对象
        function sendAjax(url) {
            return new Promise((resolve, reject) => {
                //1. 创建对象
                const x = new XMLHttpRequest();
                //2. 初始化
                x.open('POST', 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("接口名").then(value=>{
        //     console.log(value);
        // }, reason=>{})
  
 
 
        // async与await 测试axios
        
        async function main(){
            //发送 AJAX 请求
            let result = await sendAJAX("接口名");
 
            console.log(result);
        }
 
        main();