如何在JavaScript中返回异步函数的结果

了解如何使用JavaScript返回异步函数(基于promise或基于回调)的结果

假设您有这个问题:您正在进行异步调用,并且您需要从原始函数返回该调用的结果。

像这样:

const mainFunction = () => {
  const result = asynchronousFunction()
  return result
}

asynchronousFunction()在其中执行一些异步调用(例如fetch()调用),并且无法直接返回结果值。也许在内部它有一个需要等待的承诺或回调。像这样:

const asynchronousFunction = () => {
  return fetch('./file.json').then(response => {
    return response
  })
}

您能做什么呢?

异步/等待是最直接的解决方案。您使用await关键字而不是基于承诺的方法,就像我们之前使用的方法一样:

const asynchronousFunction = async () => {
  const response = await fetch('./file.json')
  return response
}

在这种情况下mainFunction我们需要在函数签名中添加async,并等待调用asynchronousFunction()

const mainFunction = async () => {
  const result = await asynchronousFunction()
  return result
}

现在这将返回一个promise,因为它是一个异步函数:

mainFunction() //returns a Promise

因此,要获得结果,您可以将其包装在IIFE中,如下所示:

(async () => {
  console.log(await mainFunction())
})()

代码看起来就像您习惯于使用其他语言的同步代码一样,但是它是完全异步的。

另一种方法是使用回调。但是当使用异步/等待时,我们可以只更改asynchronousFunction()代码,在这种情况下,我们必须

  1. 修改asynchronousFunction()代码
  2. 修改mainFunction()代码
  3. 修改调用代码

这是一个例子。asynchronousFunction()接收一个新函数作为参数,我们称之为callback。它调用它传递response目的:

const asynchronousFunction = callback => {
  return fetch('./file.json').then(response => {
    callback(response)
  })
}

该函数通过mainFunction

const mainFunction = () => {
  const callback = result => {
    console.log(result)
  }

asynchronousFunction(callback) }

难题的最后一部分是在调用的函数中mainFunction。由于我们无法直接从中返回响应mainFunction,因为我们是异步获取的,所以调用函数必须更改其处理方式。

所以代替const result = mainFunction(),我们可以使用

const callbackFunction = result => {
  console.log(result)
}

const mainFunction = callback => { asynchronousFunction(callback) }

//call the code mainFunction(callbackFunction)

免费下载我的JavaScript初学者手册


更多js教程: