在前端开发中，我们经常需要通过异步调用获取数据或执行操作。异步调用是指在后台线程或进程中执行某个任务，并在任务完成后将结果返回给主线程或进程。异步调用的优点是可以提高程序的性能和响应速度，但同时也带来了一些问题，如如何正确处理返回的响应。
本文将介绍如何从异步调用返回响应，并提供一些示例代码供参考。
使用回调函数
最常见的处理异步响应的方式是使用回调函数。当异步操作完成后，会调用预定义的回调函数，并将结果传递给该函数。以下是一个简单的示例：
-- -------------------- ---- -------
-------- -------------- --------- -
----- --- - --- -----------------
--------------- -----
---------- - -- -- -
-- ----------- --- ---- -
-----------------------
- ---- -
-------------------- -------- -------
-
--
-----------
-
------------------------------------- ---------- -- -
----------------------
---在此示例中，我们定义了一个 fetchData 函数，它接受一个 URL 和一个回调函数作为参数。在函数内部，我们创建了一个 XMLHttpRequest 对象并发送了一个 GET 请求。当请求完成时，我们检查状态码是否为 200（表示成功），如果是，则调用传入的回调函数并将响应作为参数传递给它。
在这里，我们调用 fetchData 并传递一个匿名函数作为回调函数。当异步请求成功时，该函数会被调用，并将响应输出到控制台上。
使用 Promise
Promise 是一种更现代化的处理异步响应的方法。Promise 是一个表示异步操作最终完成或失败的对象。它具有三个状态：pending（进行中）、fulfilled（已成功）和 rejected（已拒绝）。以下是一个示例：
-- -------------------- ---- -------
-------- -------------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- -----
---------- - -- -- -
-- ----------- --- ---- -
----------------------
- ---- -
------------- -------- -------
-
--
-----------
---
-
-------------------------------------
---------------- -- -
----------------------
--
-------------- -- -
---------------------
---在此示例中，我们定义了一个 fetchData 函数，该函数返回一个 Promise 对象。在函数内部，我们创建了一个 XMLHttpRequest 对象并发送一个 GET 请求。当请求完成时，我们检查状态码是否为 200（表示成功），如果是，则调用 resolve 并传递响应作为参数。否则，我们调用 reject 并传递一个错误消息。
在这里，我们使用 then 方法来注册一个回调函数，在 Promise 成功时调用。我们还使用 catch 方法来注册一个回调函数，在 Promise 失败时调用。在这两种情况下，我们都将错误消息输出到控制台上。
使用 Promise 的好处是可以更清晰地表达代码的意图，并且可以通过链式调用 then 方法来处理多个异步操作。
使用 async/await
async/await 是 ES2017 中引入的语言特性，它提供了一种更简洁和直观的方式来处理异步响应。async/await 允许我们使用类似同步代码的结构来编写异步代码。以下是一个示例：
-- -------------------- ---- -------
----- -------- -------------- -
----- -------- - ----- -----------
-- ------------- -
------ ----------------
- ---- -
----- --- ------------ -------- -------
-
-
----- -------- ------ -
--- -
----- ---- - ----- --------------------------------------
------------------
- ----- ------- -
-------------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------