javascript 回调函数，异步知识点

传统的回调函数：

复制代码
<!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>
            function hot(fn) {
                setTimeout(() => {
                    fn('吃火锅')
                }, 2000)
            }

            function tea(fn) {
                setTimeout(() => {
                    fn('喝奶茶')
                }, 400)
            }
            //先吃火锅在喝奶茶
            hot(function (data) {
                console.log(data)
                tea(function (data) {
                    console.log(data)
                })
            })
        </script>
    </body>
</html>
复制代码

Promise 知识点（出现的原因是callback模式 会出现回调地狱的现象，promise就是解决这个问题）

复制代码
<!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>
            //resole可以将异步数据传递出来
            function tea() {
                return new Promise((resole) => {
                    setTimeout(() => {
                        resole('喝奶茶')
                    }, 1000)
                })
            }

            //resole可以将异步数据传递出来
            function hot() {
                return new Promise((resole) => {
                    setTimeout(() => {
                        resole('吃火锅')
                    }, 5000)
                })
            }

            //通过then拿异步数据
            hot()
                .then((data) => {
                    console.log(data)
                    //返回promise对象
                    return tea()
                })
                //tea 的promise对象
                .then((data) => {
                    console.log(data)
                })
        </script>
    </body>
</html>
复制代码

async 

复制代码
<!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>
            //async 函数 ：在函数前面加上async 就是async 函数
            //函数内部 可以写一个 await
            //await后面可以加一个 promise对象
            //promise 对象前面加个await 可以获取 resolve传递出来的异步值。
            function getHot() {
                return new Promise((resole) => {
                    setTimeout(() => {
                        resole('火锅')
                    }, 5000)
                })
            }

            function getTea() {
                return new Promise((resole) => {
                    setTimeout(() => {
                        resole('奶茶')
                    }, 2000)
                })
            }

            async function getData(params) {
                let tea = await getTea()
                console.log(tea)
                let hot = await getHot()
                console.log(hot)
            }

            //getData()

            async function getData2(params) {
                let hot = await new Promise((resole) => {
                    setTimeout(() => {
                        resole('火锅')
                    }, 2000)
                })
                console.log(hot)

                let tea = await new Promise((resole) => {
                    setTimeout(() => {
                        resole('奶茶')
                    }, 5000)
                })
                console.log(tea)
            }
            getData2()
        </script>
    </body>
</html>
复制代码

 

posted @   s_p  阅读(1)  评论(0)  编辑  收藏  举报
相关博文：
·  10分钟白话call、apply、bind八股文
·  js回调地狱
·  js - callback()回调函数
·  JavaScript回调函数
·  深入理解Js回调函数
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示