在前端开发中，我们通常会使用异步回调函数来处理网络请求或其他耗时的操作。但是，在某些情况下，我们需要从异步回调函数中获取数据并将其传递给其他部分的代码。本文将介绍如何从异步回调函数返回值。
回调函数的基本概念
回调函数是一种特殊的 JavaScript 函数，可以在另一个函数执行完毕后自动调用。在异步编程中，回调函数通常用来处理异步操作的结果。例如，当您发起 AJAX 请求时，浏览器会在后台发送请求并继续执行代码。当服务器响应请求时，浏览器将调用您提供的回调函数以处理响应数据。
以下是一个简单的示例，演示了如何使用回调函数处理 AJAX 请求的响应：
-------- ------------ --------- -
----- --- - --- -----------------
--------------- -----
---------- - ---------- -
-- ----------- --- ---- -
---------------------------
- ---- -
---------------
-
--
----------- - ---------- -
---------------
--
-----------
-
-------------------- ---------------------- -
-- -------------- -
--------------------------
- ---- -
--------------------- -- --- -------
-
---在上面的代码中，getData 函数接受一个 URL 和一个回调函数作为参数。它使用 XMLHttpRequest 对象发起 AJAX 请求，并在请求完成后调用回调函数来处理响应数据。
无法直接从回调函数中返回值
在 JavaScript 中，函数的返回值是通过 return 语句传递给调用方的。但是，由于异步回调函数是在其他代码执行之后才被调用的，所以无法直接从回调函数中返回值。例如，以下代码将不起作用：
-------- ------------ -
----- --- - --- -----------------
--------------- -----
---------- - ---------- -
-- ----------- --- ---- -
------ ----------------- -- -------
-
--
-----------
-
----- ------------ - ---------------------
-------------------------- -- --- ------------ -- ---------在上面的代码中，getData 函数尝试从 AJAX 响应中获取文本并返回它。但由于回调函数是异步执行的，所以该函数实际上没有返回任何值。
使用 Promise 来解决问题
为了解决这个问题，我们可以使用 JavaScript 的 Promise 对象。Promise 是一种表示异步操作结果的对象，可以让我们更容易地处理异步操作的结果。
以下是使用 Promise 来获取 AJAX 响应的示例代码：
-------- ------------ -
------ --- ------------------------- ------- -
----- --- - --- -----------------
--------------- -----
---------- - ---------- -
-- ----------- --- ---- -
--------------------------
- ---- -
------------------------------
-
--
----------- - ---------- -
--------------------- ---------
--
-----------
---
-
------------------------------------------------ -
--------------------------
------------------------ -
---------------------
---在上面的代码中，getData 函数返回一个 Promise 对象。当 AJAX 请求成功时，resolve 函数将被调用并传递响应文本。当请求失败时，reject 函数将被调用并传递一个错误对象。
我们可以使用 then 方法来处理成功情况，并使用 catch 方法来处理失败情况。这两个方法都接受一个回调函数作为参数，该回调函数将在异步操作完成后被调用。
使用 async/await 来简化代码
除了使用 Promise，您还可以使用 async/await 来处理异步回
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8467