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

Say you have this problem: you are making an asynchronous call, and you need the result of that call to be returned from the original function.

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

Like this:

像这样：

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

but asynchronousFunction() performs some asynchronous call in it (for example a fetch() call), and can’t directly return the result value. Perhaps internally it has a promise it needs to wait for, or a callback. Like this:

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

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

What can you do instead?

您能做什么呢？

Async/await is the most straightforward solution. You use the await keyword instead than a promise-based approach, like the one we used before:

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

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

In this case in mainFunction we need to add async to the function signature, and await before we call asynchronousFunction():

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

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

Now this returns a promise, because it’s an async function:

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

mainFunction() //returns a Promise

So to get the result back you can wrap this in an IIFE like this:

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

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

The code looks like synchronous code you are used to from other languages, but it’s completely async.

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

Another approach is to use callbacks. But while with async/await we could change just the asynchronousFunction() code, in this case we have to

另一种方法是使用回调。 但是在使用async / await的同时，我们只能更改asynchronousFunction()代码，在这种情况下，我们必须

1. modify the asynchronousFunction() code

   修改asynchronousFunction()代码

2. modify the mainFunction() code

   修改mainFunction()代码

3. modify the calling code, too
   修改调用代码

Here’s an example. asynchronousFunction() receives a new function as a parameter, which we call callback. It invokes it passing the response object:

这是一个例子。 asynchronousFunction() Function asynchronousFunction()接收一个新函数作为参数，我们称之为callback 。 它通过response对象调用它：

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

This function is passed by mainFunction:

该函数由mainFunction传递：

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

  asynchronousFunction(callback)
}

The final piece of the puzzle is in the function that calls mainFunction. Since we can’t return the response straight from mainFunction, because we get that asynchronously, the calling function must change how it processes it.

难题的最后一部分是调用mainFunction的函数。 由于我们不能直接从mainFunction返回响应，因为我们是异步获取的，因此调用函数必须更改其处理方式。

So instead of const result = mainFunction(), we could use

因此，我们可以使用const result = mainFunction()代替

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

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

//call the code

mainFunction(callbackFunction)

翻译自: https://flaviocopes.com/how-to-return-result-asynchronous-function/