首页 > web前端 > js教程 > 正文

如何在 JavaScript 中使用'async”和'await”进行流畅的异步编程?

Mary-Kate Olsen
发布: 2024-10-19 22:38:29
原创
539 人浏览过

How to Use 'async' and 'await' for Smooth Asynchronous Programming in JavaScript?

JavaScript 中带有“async”和“await”的异步函数

异步编程在 JavaScript 模型中至关重要。当异步操作完成时,随后执行附加代码是很常见的。以前,回调被用于此目的。然而,嵌套回调可能会导致“回调地狱”。

Promises

Promise 改善了与嵌套回调相关的问题。它们通过“承诺链”实现链接,从而提供更清晰的语法和错误处理。例如:

<code class="javascript">const randomProm = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve('Succes');
  } else {
    reject('Failure');
  }
});

// Promise chain
randomProm
  .then((value) => {
    console.log('inside then1');
    console.log(value);
    return value;
  })
  .then((value) => {
    console.log('inside then2');
    console.log(value);
    return value;
  })
  .catch((value) => {
    console.log('inside catch');
    console.log(value);
  });</code>
登录后复制

'async' 和 'await' 关键字

引入异步函数,也称为“异步函数”,以进一步简化异步编程。这些函数以 async 关键字为前缀,并允许使用await 关键字。

await 暂停异步函数的执行,直到其中的表达式(通常是 Promise)稳定下来。一旦表达式解析,函数就会恢复。例如:

<code class="javascript">async function myAsyncFunc() {
  try {
    const result = await randomProm;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

myAsyncFunc();</code>
登录后复制

在此示例中,myAsyncFunc 是一个等待 randomProm Promise 结果的异步函数。一旦 Promise 解析或拒绝,就会执行 try/catch 块的相应分支。通过利用 async 和 wait,我们消除了对复杂回调逻辑的需求并增强了代码可读性。

以上是如何在 JavaScript 中使用'async”和'await”进行流畅的异步编程?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板