获取异步操作值

Posted 2020-12-21 tonedog

前端异步方法

在进行前端操作时主要的异步操作有：

• 定时器操作
• ajax异步操作
• 事件绑定
• 回调（不严谨）
  在使使用定时器以及ajax异步操作时，返回值会显示为空。
  下面看这个例子：

        function testNormal(){
            var str = "是否会显示?"
            return str
        }
        function testTimer(){
            setTimeout(function (){
                var str = "是否会显示?"
                return str
            }, 100)
        }
        console.log(testNormal()) // 结果为："是否会显示?"
        console.log(testTimer())  // 结果为：undefined

我们如果想在外界拿到异步操作中的str该怎么办呢
接下来我们来看解决这个问题的办法

通过回调来进行解决

function testTimer(callback){ // 参数为回调函数
            setTimeout(function (){ // 使用定时器进行异步操作
                var str = "是否会显示?"
                callback(str)
            }, 100)
        }
        testTimer(function (str){console.log(str)}) // 传入函数
        /*
            结果为："是否会显示?"
            此时，我们已经在拿到了定时器中的值
            */

通过ES6中提供的Promise类解决

先来看Promsie的定义：
Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
也许有些晦涩难懂，接下来我们来实际应用一下，这可能会帮助你更好的理解其意义。

var p = new Promise(function (resolve, reject){ // 生成一个 Promise 实例;resolve:正常执行时调用，reject:出错时调用
            setTimeout(function (){ // 进行异步操作
                var str = "显示"
                resolve(str) // 将 str 值传递给then
            }, 100)
        }).then(function (getStr){ // 在第一个function后执行，获得 resolve 的传递值
            console.log(getStr) 
        })

通过ES7中提供的async/await来处理

function testTimer(){ // 返回一个Promise对象
            return new Promise(function (resolve, reject){
                setTimeout(function (){
                    var str = "是否会显示"
                    resolve(str)
                }, 100)
            })
        }

        async function showStr (){ 
            var str = await testTimer() await可以接收一个Promise对象，此时async函数会暂停运行等待函数处理完毕
            console.log(str)
        }
        showStr()