JavaScript 是一门单线程语言，在执行代码时会遵循一个主线程的执行顺序。当我们需要进行一些异步操作，比如网络请求、文件读写等，就需要使用回调函数或者 Promise 来处理异步结果。但是在某些情况下，我们却希望能够像同步代码一样直接获取异步函数的返回值。这时候，我们就需要使用一些技巧来实现同步调用异步 JavaScript 函数。
使用 async/await
async/await 是 ES2017 标准中引入的异步编程语法糖，它可以让我们以同步的方式编写异步代码。async/await 实际上是基于 Promise 的封装，通过 await 关键字等待 Promise 对象的返回结果，并且可以使用 try/catch 来处理 Promise 对象的异常。
下面是一个使用 async/await 实现同步调用异步函数的示例代码：
----- -------- ------ -
----- ------ - ----- ------------
--------------------
-
-------- ----------- -
------ --- --------------- -- -
------------- -- -
-------------- --------
-- ------
---
-
------- -- -------- -----在上面的代码中，我们定义了一个 main 函数，使用 await 等待异步函数 asyncFunc 的返回结果，并将结果打印到控制台上。由于 main 函数前加了 async 关键字，可以将其定义为一个异步函数，这样我们就可以在其中使用 await 关键字了。
使用生成器函数
生成器函数也可以用来实现同步调用异步函数的效果。生成器函数是一种特殊的函数，可以暂停执行并保存当前的上下文状态，在需要时恢复执行。我们可以将异步函数包装成生成器函数，通过调用 next() 方法来获取异步结果。
下面是一个使用生成器函数实现同步调用异步函数的示例代码：
--------- ------ -
----- ------ - ----- ------------
--------------------
-
-------- ----------- -
------ --- --------------- -- -
------------- -- -
-------------- --------
-- ------
---
-
----- --- - -------
------------------------- -- ---------------在上面的代码中，我们定义了一个生成器函数 main，通过调用 next() 方法来获取异步函数 asyncFunc 的返回值，并将结果打印到控制台上。在 asyncFunc 函数的返回结果上调用 next() 方法，并传入该结果作为参数，就可以继续执行生成器函数。
总结
以上就是两种常见的同步调用异步 JavaScript 函数的方法。使用 async/await 可以让异步代码看起来更像同步代码，但是需要注意避免阻塞主线程；使用生成器函数可以灵活控制异步代码的执行流程，但是需要手动管理异步结果。在实际开发中，我们可以根据具体的场景选择合适的方法来处理异步代码。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9890