promise的几个关键问题2：改变promise状态和指定回调函数谁先谁后？

Myth丶恋晨 2023-06-19 06:48 14阅读 0赞

###  3.改变promise状态和指定回调函数谁先谁后？ ###

###         （1）都有可能，正常情况下是先指定回调再改变状态，但也可先改变状态再指定回调 ###

###         （2）如何先改变状态再指定回调？ ###

###             ①在执行器中直接调用resolve()/reject() ###

###             ②延迟更长时间才调用then() ###

###         （3）什么时候才能的得到数据？ ###

###             ①如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据 ###

###             ②如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>07_promise的几个关键问题2</title>
    </head>
    
    <body>
    
    </body>
    <script>
        /*
        3.改变promise状态和指定回调函数谁先谁后？
            （1）都有可能，正常情况下是先指定回调再改变状态，但也可先改变状态再指定回调
            （2）如何先改变状态再指定回调？
                ①在执行器中直接调用resolve()/reject()
                ②延迟更长时间才调用then()
            （3）什么时候才能的得到数据？
                ①如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
                ②如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据
        */
    
        //常规：先指定回调函数，后改变的状态
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('成功1') //后改变的状态（同时指定数据），异步执行回调函数
            }, 1000)
        }).then(//先指定回调函数，保存当前指定的回调函数
            value => {
                console.log('value1', value)
            },
            reason => {
                console.log('reason1', reason)
            }
        )
    
        //如何向改变状态，再指定回调函数
        new Promise((resolve, reject) => {
            resolve('成功2') //先改变的状态（同时指定数据）
        }).then(//后指定回调函数，异步执行回调函数
            value => {
                console.log('value2', value)
            },
            reason => {
                console.log('reason2', reason)
            }
        )
    
    
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('成功3') //先改变的状态（同时指定数据）,异步执行回调函数
            },1000)
           
        })
    
        setTimeout(() => {
            p.then(
                value => {
                    console.log('value3', value)
    
                },
                reason => {
                    console.log('reason3', reason)
                }
            )
        },2000)
    
    
    
    </script>
    
    </html>