异步流控制

本文内容主要参考了 Mixu 的 Node.js 书籍。

JavaScript 的核心设计理念是“主线程”非阻塞，这是渲染视图的地方。可以想象这在浏览器中的重要性。当主线程被阻塞时，会导致用户所厌恶的“卡死”现象，并且无法分发其他事件，从而导致数据采集丢失等问题。

这带来了一些独特的限制，只有函数式编程才能解决。这就是回调函数发挥作用的地方。

然而，在更复杂的流程中，回调函数可能难以处理。这通常会导致“回调地狱”，多个嵌套的回调函数会使代码更难阅读、调试、组织等。

async1(function (input, result1) {
  async2(function (result2) {
    async3(function (result3) {
      async4(function (result4) {
        async5(function (output) {
          // do something with output
        });
      });
    });
  });
});
JavaScript复制到剪贴板

当然，在现实生活中，很可能会有额外的代码行来处理result1、result2等，因此，这个问题的长度和复杂性通常会导致代码看起来比上面的示例更混乱。

这就是函数发挥巨大作用的地方。更复杂的操作是由许多函数组成的

  1. 启动器风格/输入
  2. 中间件
  3. 终止器

“启动器风格/输入”是序列中的第一个函数。此函数将接受操作的原始输入（如果有）。操作是一系列可执行的函数，原始输入主要为

  1. 全局环境中的变量
  2. 直接调用，带或不带参数
  3. 通过文件系统或网络请求获得的值

网络请求可以是来自外部网络的传入请求，来自同一网络上的另一个应用程序的请求，或者由应用程序本身在同一网络或外部网络上发起的请求。

中间件函数将返回另一个函数，终止器函数将调用回调函数。以下说明了网络或文件系统请求的流程。这里延迟为 0，因为所有这些值都存在于内存中。

function final(someInput, callback) {
  callback(`${someInput} and terminated by executing callback `);
}

function middleware(someInput, callback) {
  return final(`${someInput} touched by middleware `, callback);
}

function initiate() {
  const someInput = 'hello this is a function ';
  middleware(someInput, function (result) {
    console.log(result);
    // requires callback to `return` result
  });
}

initiate();
JavaScript复制到剪贴板

状态管理

函数可能依赖于状态，也可能不依赖于状态。当函数的输入或其他变量依赖于外部函数时，就会出现状态依赖。

因此，状态管理主要有两种策略：

  1. 将变量直接传递给函数，以及
  2. 从缓存、会话、文件、数据库、网络或其他外部来源获取变量值。

注意，我没有提到全局变量。使用全局变量管理状态通常是一种糟糕的模式，它会使保证状态变得困难甚至不可能。在复杂的程序中，应尽可能避免使用全局变量。

控制流

如果对象在内存中可用，则可以进行迭代，并且不会改变控制流。

function getSong() {
  let _song = '';
  let i = 100;
  for (i; i > 0; i -= 1) {
    _song += `${i} beers on the wall, you take one down and pass it around, ${
      i - 1
    } bottles of beer on the wall\n`;
    if (i === 1) {
      _song += "Hey let's get some more beer";
    }
  }

  return _song;
}

function singSong(_song) {
  if (!_song) throw new Error("song is '' empty, FEED ME A SONG!");
  console.log(_song);
}

const song = getSong();
// this will work
singSong(song);
JavaScript复制到剪贴板

但是，如果数据存在于内存之外，则迭代将不再起作用。

function getSong() {
  let _song = '';
  let i = 100;
  for (i; i > 0; i -= 1) {
    /* eslint-disable no-loop-func */
    setTimeout(function () {
      _song += `${i} beers on the wall, you take one down and pass it around, ${
        i - 1
      } bottles of beer on the wall\n`;
      if (i === 1) {
        _song += "Hey let's get some more beer";
      }
    }, 0);
    /* eslint-enable no-loop-func */
  }

  return _song;
}

function singSong(_song) {
  if (!_song) throw new Error("song is '' empty, FEED ME A SONG!");
  console.log(_song);
}

const song = getSong('beer');
// this will not work
singSong(song);
// Uncaught Error: song is '' empty, FEED ME A SONG!
JavaScript复制到剪贴板

为什么会这样？setTimeout 指示 CPU 将指令存储在总线上的其他位置，并指示在稍后时间安排数据提取。在函数再次命中 0 毫秒标记之前，会经过数千个 CPU 周期，CPU 从总线中获取指令并执行它们。唯一的问题是，song ('') 在数千个周期之前就被返回了。

处理文件系统和网络请求时也会出现相同的情况。主线程根本无法被阻塞无限期的时间——因此，我们使用回调以受控的方式安排代码的执行时间。

您可以使用以下 3 种模式执行几乎所有操作

  1. 串行：函数将按严格的顺序执行，这与 for 循环最相似。
// operations defined elsewhere and ready to execute
const operations = [
  { func: function1, args: args1 },
  { func: function2, args: args2 },
  { func: function3, args: args3 },
];

function executeFunctionWithArgs(operation, callback) {
  // executes function
  const { args, func } = operation;
  func(args, callback);
}

function serialProcedure(operation) {
  if (!operation) process.exit(0); // finished
  executeFunctionWithArgs(operation, function (result) {
    // continue AFTER callback
    serialProcedure(operations.shift());
  });
}

serialProcedure(operations.shift());
JavaScript复制到剪贴板
  1. 完全并行：当顺序无关紧要时，例如向 1,000,000 个电子邮件收件人发送电子邮件。
let count = 0;
let success = 0;
const failed = [];
const recipients = [
  { name: 'Bart', email: 'bart@tld' },
  { name: 'Marge', email: 'marge@tld' },
  { name: 'Homer', email: 'homer@tld' },
  { name: 'Lisa', email: 'lisa@tld' },
  { name: 'Maggie', email: 'maggie@tld' },
];

function dispatch(recipient, callback) {
  // `sendEmail` is a hypothetical SMTP client
  sendMail(
    {
      subject: 'Dinner tonight',
      message: 'We have lots of cabbage on the plate. You coming?',
      smtp: recipient.email,
    },
    callback
  );
}

function final(result) {
  console.log(`Result: ${result.count} attempts \
      & ${result.success} succeeded emails`);
  if (result.failed.length)
    console.log(`Failed to send to: \
        \n${result.failed.join('\n')}\n`);
}

recipients.forEach(function (recipient) {
  dispatch(recipient, function (err) {
    if (!err) {
      success += 1;
    } else {
      failed.push(recipient.name);
    }
    count += 1;

    if (count === recipients.length) {
      final({
        count,
        success,
        failed,
      });
    }
  });
});
JavaScript复制到剪贴板
  1. 有限并行：有限的并行，例如从 10E7 个用户列表中成功向 1,000,000 个收件人发送电子邮件。
let successCount = 0;

function final() {
  console.log(`dispatched ${successCount} emails`);
  console.log('finished');
}

function dispatch(recipient, callback) {
  // `sendEmail` is a hypothetical SMTP client
  sendMail(
    {
      subject: 'Dinner tonight',
      message: 'We have lots of cabbage on the plate. You coming?',
      smtp: recipient.email,
    },
    callback
  );
}

function sendOneMillionEmailsOnly() {
  getListOfTenMillionGreatEmails(function (err, bigList) {
    if (err) throw err;

    function serial(recipient) {
      if (!recipient || successCount >= 1000000) return final();
      dispatch(recipient, function (_err) {
        if (!_err) successCount += 1;
        serial(bigList.pop());
      });
    }

    serial(bigList.pop());
  });
}

sendOneMillionEmailsOnly();
JavaScript复制到剪贴板

每种模式都有其自身的用例、优点和问题，您可以进行实验并了解更多详细信息。最重要的是，请记住模块化您的操作并使用回调！如果您有任何疑问，请将所有内容都视为中间件！

上一步安全最佳实践下一步阻塞与非阻塞概述
阅读时间
6 分钟阅读
贡献
编辑此页面
目录
  1. 状态管理
  2. 控制流