JavaScript 中的异步、等待

在 Javascript 异步中，await 提供了更具可读性和“更干净”的方式来处理 Promise。 （您可以在这里阅读有关承诺的内容）。

首先让我们了解一下语法。

异步关键字：

我们有 async 关键字，当我们声明一个函数是异步的时，我们知道这个函数总是会返回一个 Promise。即使你直接返回一个值，JavaScript 也会自动将其包装在一个 Promise 中。

等待关键字：

首先我们必须知道，如果我们想使用await关键字，我们只能在异步函数中使用它。
这个await关键字暂停异步函数的执行，直到promise被解决或拒绝。

让我们看一个非常简单的 async/await 示例，之后我们将使用一个更大的示例来比较完整的 Promise 方法（没有 async/await）与 async/await 方法。

异步/等待的简单示例：

让我们打破它：

1. response.ok：该属性检查响应的HTTP状态代码是否在成功范围（200-299）内。
2. response.json()：如果响应成功，该函数会解析服务器返回的JSON数据。
3. response.status：这为您提供了确切的状态代码，例如 404（未找到）或 500（服务器错误）。

现在我们了解了 async/await 的基础知识，让我们更深入地了解一下另一个带有 Promise 的示例。
我们有 3 个函数，每个函数都返回一个 Promise：

（这些功能的解释可以在这里找到）

现在，我们可以使用than()和catch()来调用这些函数：

此代码是 JavaScript 中 Promise 链的示例，其中异步操作（如获取数据）按顺序执行，并且每一步都依赖于上一步的结果。

• 一旦 getOrders(user.id) 解析，它将订单数组传递给下一个 .then() 内的回调函数。

• 订单已记录到控制台。

• 然后，调用 getOrderDetails(orders[1])，它获取订单数组中的第二个订单（假设它存在）。

• 此函数返回一个 promise，该承诺在获取订单详细信息时解析。

• 返回了 getOrderDetails() 的 Promise，因此下一个 .then() 等待这个 Promise 解决。

结果：

异步/等待方法：

此代码是如何在 JavaScript 中使用 async/await 的示例，与 Promise 链方法相比，以更具可读性的方式处理异步操作。

说明：
1.异步函数asyncAwaitExample():

• 此函数被标记为异步，这意味着它将始终 返回一个承诺。它允许在其中使用await 关键字。
  • 在函数内部，异步代码的编写方式与同步代码的外观和行为类似，从而提高了可读性。

1. 尝试 { ... } catch (错误) { ... }:

• try-catch 块用于处理错误。异步操作执行过程中发生的任何错误都将被捕获在 catch 块中。

1. const user = wait getUser(1);:

• await 关键字暂停函数的执行，直到 getUser(1) 承诺得到解决。 - 一旦 getUser Promise 解析，结果（用户对象）将存储在用户变量中 -如果promise被拒绝（即发生错误），则跳转到catch块来处理错误 -const Order、const 详细信息的操作相同

4.catch (error) { console.log("错误是：", error); }:

• 如果任何异步函数（getUser、getOrders 或 getOrderDetails）抛出错误或其 Promise 被拒绝，执行将跳转到 catch 块。

结果：

异步/等待的好处：

1.可读性：异步代码看起来像同步代码，减少了嵌套 .then() 块或处理回调地狱的需要。
2.错误处理：使用简单的 try-catch 块，您可以比使用带有 Promise 的 .catch() 更直接地处理错误。
3.可维护性：随着逻辑变得越来越复杂，使用 async/await 比使用 Promise 链更容易遵循和维护。

以上是JavaScript 中的异步、等待的详细内容。更多信息请关注PHP中文网其他相关文章！