Asynchronous flow control

The material in this post is heavily inspired by Mixu's Node.js Book.

At its core, JavaScript is designed to be non-blocking on the "main" thread, this is where views are rendered. You can imagine the importance of this in the browser. When the main thread becomes blocked it results in the infamous "freezing" that end users dread, and no other events can be dispatched resulting in the loss of data acquisition, for example.

This creates some unique constraints that only a functional style of programming can cure. This is where callbacks come in to the picture.

However, callbacks can become challenging to handle in more complicated procedures. This often results in "callback hell" where multiple nested functions with callbacks make the code more challenging to read, debug, organize, etc.

async1(function (input: anyinput, result1: anyresult1) {
  async2(function (result2: anyresult2) {
    async3(function (result3: anyresult3) {
      async4(function (result4: anyresult4) {
        async5(function (output: anyoutput) {
          // do something with output
        });
      });
    });
  });
});

Of course, in real life there would most likely be additional lines of code to handle result1, result2, etc., thus, the length and complexity of this issue usually results in code that looks much more messy than the example above.

This is where functions come in to great use. More complex operations are made up of many functions:

initiator style / input
middleware
terminator

The "initiator style / input" is the first function in the sequence. This function will accept the original input, if any, for the operation. The operation is an executable series of functions, and the original input will primarily be:

variables in a global environment
direct invocation with or without arguments
values obtained by file system or network requests

Network requests can be incoming requests initiated by a foreign network, by another application on the same network, or by the app itself on the same or foreign network.

A middleware function will return another function, and a terminator function will invoke the callback. The following illustrates the flow to network or file system requests. Here the latency is 0 because all these values are available in memory.

function function final(someInput: any, callback: any): voidfinal(someInput: anysomeInput, callback: anycallback) {
  callback: anycallback(`${someInput: anysomeInput} and terminated by executing callback `);
}

function function middleware(someInput: any, callback: any): voidmiddleware(someInput: anysomeInput, callback: anycallback) {
  return function final(someInput: any, callback: any): voidfinal(`${someInput: anysomeInput} touched by middleware `, callback: anycallback);
}

function function initiate(): voidinitiate() {
  const const someInput: "hello this is a function "someInput = 'hello this is a function ';
  function middleware(someInput: any, callback: any): voidmiddleware(const someInput: "hello this is a function "someInput, function (result: anyresult) {
    var console: Consoleconsole.Console.log(...data: any[]): void[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(result: anyresult);
    // requires callback to `return` result
  });
}

function initiate(): voidinitiate();

State management

Functions may or may not be state dependent. State dependency arises when the input or other variable of a function relies on an outside function.

In this way there are two primary strategies for state management:

passing in variables directly to a function, and
acquiring a variable value from a cache, session, file, database, network, or other outside source.

Note, I did not mention global variable. Managing state with global variables is often a sloppy anti-pattern that makes it difficult or impossible to guarantee state. Global variables in complex programs should be avoided when possible.

Control flow

If an object is available in memory, iteration is possible, and there will not be a change to control flow:

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

  return let _song: string_song;
}

function function singSong(_song: any): voidsingSong(_song: any_song) {
  if (!_song: any_song) {
    throw new var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)Error("song is '' empty, FEED ME A SONG!");
  }

  var console: Consoleconsole.Console.log(...data: any[]): void[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(_song: any_song);
}

const const song: stringsong = function getSong(): stringgetSong();
// this will work
function singSong(_song: any): voidsingSong(const song: stringsong);

However, if the data exists outside of memory the iteration will no longer work:

function function getSong(): stringgetSong() {
  let let _song: string_song = '';
  let let i: numberi = 100;
  for (let i: numberi; let i: numberi > 0; let i: numberi -= 1) {
    function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/setTimeout)setTimeout(function () {
      let _song: string_song += `${let i: numberi} beers on the wall, you take one down and pass it around, ${
        let i: numberi - 1
      } bottles of beer on the wall\n`;
      if (let i: numberi === 1) {
        let _song: string_song += "Hey let's get some more beer";
      }
    }, 0);
  }

  return let _song: string_song;
}

function function singSong(_song: any): voidsingSong(_song: any_song) {
  if (!_song: any_song) {
    throw new var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)Error("song is '' empty, FEED ME A SONG!");
  }

  var console: Consoleconsole.Console.log(...data: any[]): void[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(_song: any_song);
}

const const song: stringsong = function getSong(): stringgetSong('beer');
// this will not work
function singSong(_song: any): voidsingSong(const song: stringsong);
// Uncaught Error: song is '' empty, FEED ME A SONG!

Why did this happen? setTimeout instructs the CPU to store the instructions elsewhere on the bus, and instructs that the data is scheduled for pickup at a later time. Thousands of CPU cycles pass before the function hits again at the 0 millisecond mark, the CPU fetches the instructions from the bus and executes them. The only problem is that song ('') was returned thousands of cycles prior.

The same situation arises in dealing with file systems and network requests. The main thread simply cannot be blocked for an indeterminate period of time-- therefore, we use callbacks to schedule the execution of code in time in a controlled manner.

You will be able to perform almost all of your operations with the following 3 patterns:

In series: functions will be executed in a strict sequential order, this one is most similar to for loops.

// operations defined elsewhere and ready to execute
const const operations: {
    func: any;
    args: any;
}[]operations = [
  { func: anyfunc: function1, args: anyargs: args1 },
  { func: anyfunc: function2, args: anyargs: args2 },
  { func: anyfunc: function3, args: anyargs: args3 },
];

function function executeFunctionWithArgs(operation: any, callback: any): voidexecuteFunctionWithArgs(operation: anyoperation, callback: anycallback) {
  // executes function
  const { const args: anyargs, const func: anyfunc } = operation: anyoperation;
  const func: anyfunc(const args: anyargs, callback: anycallback);
}

function function serialProcedure(operation: any): voidserialProcedure(operation: anyoperation) {
  if (!operation: anyoperation) {
    process.exit(0); // finished
  }

  function executeFunctionWithArgs(operation: any, callback: any): voidexecuteFunctionWithArgs(operation: anyoperation, function (result: anyresult) {
    // continue AFTER callback
    function serialProcedure(operation: any): voidserialProcedure(const operations: {
    func: any;
    args: any;
}[]operations.Array<{ func: any; args: any; }>.shift(): {
    func: any;
    args: any;
} | undefinedRemoves the first element from an array and returns it.
If the array is empty, undefined is returned and the array is not modified.shift());
  });
}

function serialProcedure(operation: any): voidserialProcedure(const operations: {
    func: any;
    args: any;
}[]operations.Array<{ func: any; args: any; }>.shift(): {
    func: any;
    args: any;
} | undefinedRemoves the first element from an array and returns it.
If the array is empty, undefined is returned and the array is not modified.shift());

Limited in series: functions will be executed in a strict sequential order, but with a limit on the number of executions. Useful when you need to process a large list but with a cap on the number of items successfully processed.

let let successCount: numbersuccessCount = 0;

function function final(): voidfinal() {
  var console: Consoleconsole.Console.log(...data: any[]): void[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(`dispatched ${let successCount: numbersuccessCount} emails`);
  var console: Consoleconsole.Console.log(...data: any[]): void[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log('finished');
}

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

function function sendOneMillionEmailsOnly(): voidsendOneMillionEmailsOnly() {
  getListOfTenMillionGreatEmails(function (err: anyerr, bigList: anybigList) {
    if (err: anyerr) {
      throw err: anyerr;
    }

    function function (local function) serial(recipient: any): voidserial(recipient: anyrecipient) {
      if (!recipient: anyrecipient || let successCount: numbersuccessCount >= 1000000) {
        return function final(): voidfinal();
      }

      function dispatch(recipient: any, callback: any): voiddispatch(recipient: anyrecipient, function (_err: any_err) {
        if (!_err: any_err) {
          let successCount: numbersuccessCount += 1;
        }

        function (local function) serial(recipient: any): voidserial(bigList: anybigList.pop());
      });
    }

    function (local function) serial(recipient: any): voidserial(bigList: anybigList.pop());
  });
}

function sendOneMillionEmailsOnly(): voidsendOneMillionEmailsOnly();

Full parallel: when ordering is not an issue, such as emailing a list of 1,000,000 email recipients.

let let count: numbercount = 0;
let let success: numbersuccess = 0;
const const failed: any[]failed = [];
const const recipients: {
    name: string;
    email: string;
}[]recipients = [
  { name: stringname: 'Bart', email: stringemail: 'bart@tld' },
  { name: stringname: 'Marge', email: stringemail: 'marge@tld' },
  { name: stringname: 'Homer', email: stringemail: 'homer@tld' },
  { name: stringname: 'Lisa', email: stringemail: 'lisa@tld' },
  { name: stringname: 'Maggie', email: stringemail: 'maggie@tld' },
];

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

function function final(result: any): voidfinal(result: anyresult) {
  var console: Consoleconsole.Console.log(...data: any[]): void[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(`Result: ${result: anyresult.count} attempts \
      & ${result: anyresult.success} succeeded emails`);
  if (result: anyresult.failed.length) {
    var console: Consoleconsole.Console.log(...data: any[]): void[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(`Failed to send to: \
        \n${result: anyresult.failed.join('\n')}\n`);
  }
}

const recipients: {
    name: string;
    email: string;
}[]recipients.Array<{ name: string; email: string; }>.forEach(callbackfn: (value: {
    name: string;
    email: string;
}, index: number, array: {
    name: string;
    email: string;
}[]) => void, thisArg?: any): voidPerforms the specified action for each element in an array.
@paramcallbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.forEach(function (recipient: {
    name: string;
    email: string;
}recipient) {
  function dispatch(recipient: any, callback: any): voiddispatch(recipient: {
    name: string;
    email: string;
}recipient, function (err: anyerr) {
    if (!err: anyerr) {
      let success: numbersuccess += 1;
    } else {
      const failed: any[]failed.Array<any>.push(...items: any[]): numberAppends new elements to the end of an array, and returns the new length of the array.
@paramitems New elements to add to the array.push(recipient: {
    name: string;
    email: string;
}recipient.name: stringname);
    }
    let count: numbercount += 1;

    if (let count: numbercount === const recipients: {
    name: string;
    email: string;
}[]recipients.Array<{ name: string; email: string; }>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length) {
      function final(result: any): voidfinal({
        count: numbercount,
        success: numbersuccess,
        failed: any[]failed,
      });
    }
  });
});

Each has its own use cases, benefits, and issues you can experiment and read about in more detail. Most importantly, remember to modularize your operations and use callbacks! If you feel any doubt, treat everything as if it were middleware!

发布一个 TypeScript 包概述：阻塞与非阻塞