async函数相关

最新推荐文章于 2024-07-11 20:55:36 发布
最新推荐文章于 2024-07-11 20:55:36 发布
阅读量90 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_Qsir/article/details/124334838
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 第一点：async函数与普通函数区别,及初步认识async函数
        function normal(data) {
            console.log(data);
            return 123
        }
        console.log(normal(1));  // 返回的是return值
        async function foo(data) {
            console.log(data);
            return 123
        }
        console.log(foo(11));  // 返回的是promise对象

        /**
         * 首先async函数是什么?
         * --->简单说它就是Generator的语法糖,语法糖: 带有一定功能的关键字.
         * 功能:创建并返回一个promise实例,且async只要执行就会返回promise实例对象,用于解决异步程序产生的bug
        */
        // 下面是async函数的几种写法
        var obj = {
            async bar() {
                console.log('1111111111111111111');
                return 123
            },
            async bar1() {

            },
            foo: async () => {

            },
            test: async function () {

            }
        }

        // 第二点:对于async函数return值的学习
        // 现在我们已经知道了普通函数返回的是return值,而async函数返回的是promise对象,那么async函数的return值去哪里了呢?
        async function foo(data) {
            console.log(data);
            return 123
        }
        console.log(foo(11));
        /*
        // 经打印在chrome中async函数的return值会被保存在[[PromiseResult]]中
        在火狐浏览器中则会保存在[[PromiseValue]]中,可以看出async的return值并不是消失了,而是以此种方法保存起来
        Promise
        [[Prototype]]: Promise
        [[PromiseState]]: "fulfilled"
        [[PromiseResult]]: 123
        */

        // 关于await
        /**
         * await  注意
         * 1: await 需要在async中写;
         * 2: await 后是 promise实例  
         * 3: await 作用 获取  promise.[[PromiseValue]] 的值
         * 
         * [[PromiseValue]] 哪些能赋值:
         * 1: async函数的 return
         * 2: new promise中 resolve实参
         * 3: then 中return  (catch finally 中retrun)
         * 4: Promise.resolve() 实参  Promise.reject() 实参
         * 
         */
        (async function () {

            console.log('run run run');
            // 第二种接收 函数 foo 返回值的方式 是  await 
            let res = await foo();
            console.log(res);
        }())

        async function foo(data) {
            console.log(data);
            return 123
        }

        // await[[PromiseValue]]的取值的
        (async () => {
            // resole 实参去哪了  ---->  p.[[promiseValue]]
            let p = new Promise((resolve, reject) => {
                resolve(123)
            });
            console.log(p);
            //    Promise.resove() 实参去哪了 ----->  p1.[[promiseValue]]
            let p1 = Promise.resolve('234');
            console.log(p1);
            // then-callback 的retrun去哪里了 ----> p2.[[promiseValue]]
            let p2 = p1.then(res => 456);
            console.log(p2);

            // foo的return 的中去哪的?   ------> p3.[[promiseValue]]
            async function foo() {
                return 789
            };

            let p3 = foo()
            console.log(p3);

            // res作用接受 await 的返回子
            let res = await p;
            console.log(res);
            let res1 = await p1;
            console.log(res1);
            let res2 = await p2;
            console.log(res2);
            let res3 = await p3;
            console.log(res3);
            // 综上所诉
            // 语法: await promise实例
            // 作用:  获取 promise实例.[[PromiseValue]] 的值

            // [[promiseValue]] 赋值 查询有哪些方式
            //  [[promiseState]]:fufiled状态赋值:赋值:
            // resolve() 实参 
            // then-callback return 
            // catch-callback return
            // finally-callback return
            // Promise.resolve() 实参

            // [promiseState]]:fufiled状态赋值:读取值;
            // then-callback 形参
            // await 返回值
        })()

            // 同步写法异步程序
            (async () => {
                let p = new Promise((resole, reject) => {
                    setTimeout(() => {
                        resole(1111)
                    }, 1000)
                })
                let p1 = new Promise((resole, reject) => {
                    setTimeout(() => {
                        resole(222)
                    }, 500)
                })
                let p2 = new Promise((resole, reject) => {
                    setTimeout(() => {
                        resole(333)
                    }, 1000)
                })

                // 同步写法... 实际上异步程序
                console.log('同步1111111111111111');
                // 等 await 执行结束 执行下一个 await 
                // -----> 解决异步问题导致程序运行bug 
                let res = await p;
                console.log(res);
                let res1 = await p1;
                console.log(res1);
                let res2 = await p2;
                console.log(res2);
                console.log('222222222222222');

                // console.log('同步1111111111111111');
                // p.then(res=>{
                //     console.log(res);
                // })
                // p1.then(res=>{
                //     console.log(res);
                // })
                // p2.then(res=>{
                //     console.log(res);
                // })
                // console.log('222222222222222');

            })()
    </script>
</body>

</html>
Superman_Qsir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Async 函数
技术的搬运工
12-24 927
async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await
async函数的返回值
热门推荐
Congnandaobei的博客
06-25 1万+
/** * Async 函数返回Promise */ async function main () { //如果是普通数据，那么会被包装为一个立即resolve的Promise对象 // return 123 // return Promise.resolve(123) return new Promise((resolve, reject) =&gt...
async 函数 ajax,Async 函数的使用及简单实现
weixin_35208293的博客
08-06 1141
解决回调地狱的异步操作，Async 函数是终极办法，但了解生成器和 Promise 有助于理解 Async 函数原理。由于内容较多，分三部分进行，这是第三部分，介绍 Async 函数相关。第一部分介绍 Generator，第二部分介绍 Promise。在这部分中，我们会先介绍 Async 函数的基本使用，然后会结合前两部分介绍的生成器和 Promise 实现一个 async 函数。1)Async ...
async 函数
小柒的前端之旅
08-01 719
前面的话 ES2017标准引入了async函数，使得异步操作变得更加方便。这篇文章将介绍async函数 初识 什么是async函数？简单来说，它就是Generator函数的语法糖。 使用Generator函数，依次读取两个文件： var fs = require('fs'); var readFile = function (fileName) { return new Promise(f...
async函数
过客如期的博客
02-17 1万+
一，
11【async 函数】
DSelegent的博客
08-27 669
11【async 函数】
JS async 函数
fuchang的博客
11-06 1万+
async 函数 含义 ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 async 函数是什么？一句话，它就是 Generator 函数的语法糖。 生成器 function* foo() { yield setTimeout(()=>{console.log("第一步耗时操作 开始执行")},1000) yield setTimeout(()=>{console.log("第二步耗时操作 执行中")},2000) yield setTimeout(
async 函数的使用
chengRantianxia的博客
03-11 1902
JavaScript 编程中，经常使用到异步交互，因为逻辑嵌套或者请求嵌套，所以出现了 许多延时、数据不同步的问题。从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又都有额外的复杂性，都需要理解抽象的底层运行机制。 async函数就是为了解决异步交互的问题而出现的。 async 函数对 Generator 函数的改进，体现在内置执行器、更好的语义及...
python直接调用async函数
小天花藏
01-03 9924
我们知道python是中解释型语言，无需完全编译就能运行，我们在开发过程中往往利用这一特性对一些功能、方法进行测试。但在一个项目中包含async的方法也是难免的，如果我们直接调用该方法，就会得到如下错误： RuntimeWarning: coroutine 'xxx' was never awaited 该方法根本没有执行完。想要该方法能够正常执行可采用以下方式： loop = asyncio...
async 函数的返回值
关灯吃面
08-26 5887
由于一直记录在印象笔记里，好久好久没更新博客了。。。 async 函数的返回值是一个在 pending 状态的 Promise var asyncReturn = async () => { await promiseFn() return 111 } var c = asyncReturn() console.log(c instanceof Promise) // true async 如果被 await 住，他的返回值会被复制给变量，这种情况是不会要 catch 的
JS async 函数的含义和用法实例总结
10-15
JavaScript中的`async`函数是异步编程的一种高级方式，它为开发者提供了更加简洁和易于理解的语法，使得处理异步操作变得更加优雅。`async`函数是ES2017（ES7）引入的一个特性，主要解决传统异步编程中回调地狱、...
ES6新特性八：async函数用法实例详解
08-30
ES6新特性八：async函数用法实例详解 async函数是ES6新特性八中的一种新的异步编程方式，它可以让异步编程变得更加简洁和易于理解。async函数的出现主要是为了解决异步编程中的一些问题，例如异步操作的结果无法...
深入理解js 中async 函数的含义和用法
12-12
为了简化这一过程，async函数应运而生，它被视为异步编程的一个潜在终极解决方案。 一、异步编程的历史背景 异步操作在JavaScript中的处理经历了从回调函数到Promise再到Generator函数的演变。回调函数虽然解决了...
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 869
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 437
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 184
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
最新发布
huanghm88的专栏
07-11 638
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
JS混淆基本类型和原理
朴拙科技的博客
07-06 742
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
vue3 + element-plus 表格行内编辑，如何实现表单校验？
yyXieDaiMa的博客
07-09 344
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
async 函数返回值
10-20
async 函数的返回值是一个 Promise 对象。当 async 函数被调用时，它会返回一个 Promise 对象。如果 async 函数中没有返回值，那么 Promise 对象的状态会变成 resolved，且返回值为 undefined。如果 async 函数中有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值