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 @ 2025-02-08 11:43  s_p  阅读(7)  评论(0)    收藏  举报