同步函数 return 一个异步结果

前一阵子,需求中有这样一个场景:
访问一个页面,然后需要封装为一个方法,这个方法需要返回访问这个页面的结果。大概把需求抽象一下就可以变成:一个方法 fn 需要返回一个异步的结果。直观的用代码体现:

function fn(){
  setTimeout(()=>{
    return 5
  },200)
}
fn()

如果直接这样写,可以看到返回的是 undefined。因为 fn 本身并没有返回值。代码中的 return 实际上是异步回调的返回值,没有什么意义。
那我试着用 promise 来包装一下这个异步的过程:

function fn(){
  let p = new Promise(res=>{
    setTimeout(()=>{
      res(5)
    },200)
  })
  return p 
}
fn()

clipboard.png

这时候,我们可以看到返回的是一个 pending 的 promise 对象。然后我们加上神奇的 await:

await fn()

clipboard.png

可以看到返回就是我们的预期了。

然后,我们查阅文档看下 await 的介绍:

await 命令 正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise
对象。

这就不难理解为什么这样写可以实现我们的预期了。

阅读 794

推荐阅读
79px
用户专栏

前端开发

6 人关注
21 篇文章
专栏主页