如何从异步调用返回响应?

在前端开发中,我们经常需要通过异步调用获取数据或执行操作。异步调用是指在后台线程或进程中执行某个任务,并在任务完成后将结果返回给主线程或进程。异步调用的优点是可以提高程序的性能和响应速度,但同时也带来了一些问题,如如何正确处理返回的响应。

本文将介绍如何从异步调用返回响应,并提供一些示例代码供参考。

使用回调函数

最常见的处理异步响应的方式是使用回调函数。当异步操作完成后,会调用预定义的回调函数,并将结果传递给该函数。以下是一个简单的示例:

-------- -------------- --------- -
  ----- --- - --- -----------------
  --------------- -----
  ---------- - -- -- -
    -- ----------- --- ---- -
      -----------------------
    - ---- -
      -------------------- -------- -------
    -
  --
  -----------
-

------------------------------------- ---------- -- -
  ----------------------
---

在此示例中,我们定义了一个 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 允许我们使用类似同步代码的结构来编写异步代码。以下是一个示例:

----- -------- -------------- -
  ----- -------- - ----- -----------
  -- ------------- -
    ------ ----------------
  - ---- -
    ----- --- ------------ -------- -------
  -
-

----- -------- ------ -
  --- -
    ----- ---- - ----- --------------------------------------
    ------------------
  - ----- ------- -
    -------------------

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------