掌握 Async/Await：处理 JavaScript 中的异步函数链

Async/Await：确保异步 JavaScript 调用中无需直接等待即可继续

使用现代 JavaScript 的前端解决方案（带有 async/await）

// Solution 1: Using async/await with Promises in JavaScript
async function functionFirst() {
  console.log('First is called');
  setTimeout(functionSecond, 1000);
  console.log('First fired Second and does not wait for its execution');
  return new Promise(resolve => {
    setTimeout(resolve, 2000); // Set timeout for the entire chain to complete
  });
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(functionLast, 1000);
}

function functionLast() {
  console.log('Last is called');
}

async function functionMain() {
  await functionFirst();
  console.log('called First and continue only after Last is done');
}

functionMain();

使用回调处理异步链以实现非阻塞流

在纯 JavaScript 中使用回调函数的前端方法

// Solution 2: Using Callbacks to Manage Asynchronous Flow Without Blocking
function functionFirst(callback) {
  console.log('First is called');
  setTimeout(() => {
    functionSecond(callback);
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond(callback) {
  console.log('Second is called');
  setTimeout(() => {
    functionLast(callback);
  }, 1000);
}

function functionLast(callback) {
  console.log('Last is called');
  callback();
}

function functionMain() {
  functionFirst(() => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

使用事件发射器完全控制异步流

使用 Node.js 和事件发射器进行异步流控制的后端方法

// Solution 3: Using Node.js EventEmitter to Handle Asynchronous Functions
const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

function functionFirst() {
  console.log('First is called');
  setTimeout(() => {
    eventEmitter.emit('secondCalled');
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(() => {
    eventEmitter.emit('lastCalled');
  }, 1000);
}

function functionLast() {
  console.log('Last is called');
}

eventEmitter.on('secondCalled', functionSecond);
eventEmitter.on('lastCalled', functionLast);

function functionMain() {
  functionFirst();
  eventEmitter.on('lastCalled', () => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

有关 Async/Await 和异步函数的常见问题

1. 有什么区别 async/await 和 Promises？
2. async/await 是建立在之上的语法糖 Promises，允许更清晰、更易读的异步代码。而不是链接 .then()，你使用 await 暂停函数执行，直到 Promise 解决了。
3. 我可以混合吗 async/await 和 callbacks？
4. 是的，您可以在同一代码库中使用两者。然而，重要的是要确保回调函数不与 Promises 或者 async/await 使用，这可能会导致意外的行为。
5. 我如何处理错误 async 功能？
6. 你可以把你的 await 内部调用 try/catch 阻止捕获异步执行期间发生的任何错误，确保您的应用程序继续平稳运行。
7. 的作用是什么 EventEmitter 在异步代码中？
8. 这 EventEmitter 允许您发出自定义事件并监听它们，提供一种结构化的方式来处理 Node.js 中的多个异步任务。
9. 如果我不使用会发生什么 await 在一个 async 功能？
10. 如果你不使用 await，该函数将继续执行，而不等待 Promise 去解决，可能会导致不可预测的结果。

关于 JavaScript 中异步流控制的最终想法

管理异步流可能具有挑战性，尤其是当函数相互触发时。将 async/await 与 Promises 结合使用有助于确保程序顺利运行，不会出现不必要的阻塞，非常适合需要等待函数链完成的情况。

结合事件驱动的方法或回调为特定用例添加了另一个级别的控制，例如管理服务器请求或处理复杂的流程。结合这些技术可确保开发人员即使在处理多个异步操作时也可以创建高效且响应迅速的应用程序。