js如何返回异步函数的结果

本文将介绍如何使用js基于promise或callback返回异步函数的结果

假设您遇到一个问题：您进行异步调用，并且需要从原始函数返回该调用的结果。

像这样：

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

但是，

Async function() 会进行一些异步调用（例如 fetch() 调用），并且无法直接返回结果值。也许在内部它必须等待承诺或回调。听起来像这样：

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

如何解决这个问题？

async/await 是最简单的解决方案。您使用 wait 关键字而不是我们之前使用的基于承诺的方法：

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

在这种情况下，在 mainFunction 中我们需要将 async 添加到函数签名中，并在调用 asynousfunction() 之前等待：

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

现在返回一个 Promise，因为它是一个异步函数：

mainFunction() //returns a Promise

要得到结果，你可以使用IIFE这样调用：

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

代码看起来像您在其他语言中使用的同步 代码，但它完全是异步。

另一种方法是使用回调。但是当我们使用 async/await 时，我们只需修改 async() 函数的代码即可，在这种情况下我们必须这样做

1. 编辑 asynchronousFunction() 代码
2. 编辑 mainFunction() 代码
3. 编辑呼叫代码

这是一个例子。异步 function() 接收一个新函数作为参数，我们称之为回调。通过传递响应对象来调用它：

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)