处理异步加载数据的获取

我们的需求就是在不添加回调函数的情况下，把异步获取的数据加载出来。

源码

点击这里前往Github查看本文源码。

问题抽象

这里用setTimeout代替一个异步网络请求：

代码语言：javascript复制

let data

function setDataAsync() {
    setTimeout(() => {
        data = 114514
    }, 1000)
}

setDataAsync()

console.log(data)
// undefined

显然，这里还没等data拿到就执行了console.log,导致我们获取到的是undefined。

那么解决思路就是先比较它是不是undefined，如果是就等待半秒钟再重新比较一遍。

解决方案

把上面的思路实现下来就是这样：

代码语言：javascript复制

function getData() {
    if (data === undefined) {
        setTimeout(getData, 500)
    } else {
        console.log(data)
        // 114514
    }
}

getData()

看似是递归，实际上也不能算是，因为setTimeout执行完成之后就把getData放到事件循环里了，这个函数也就执行完了。

写到这里，我突然想到用setInterval不也能解决吗，还更简单：

代码语言：javascript复制

const interval = setInterval(() => {
    if (data !== undefined) {
        console.log(data)
        // 114514
        clearInterval(interval)
    }
}, 500)

github console setinterval settimeout undefined

0 人点赞