Последовательное выполнение асинхронных функций: мастерство в асинхронном JavaScript

Введение

В этом практическом занятии мы изучим, как последовательно вызывать асинхронные функции в JavaScript. Мы узнаем, как пройти по массиву функций, содержащих асинхронные события, и вызывать функцию next, когда каждое событие завершится. В конце практического занятия вы сможете эффективно выполнять серию асинхронных операций в определенном порядке.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28192{{"Последовательное выполнение асинхронных функций"}} javascript/data_types -.-> lab-28192{{"Последовательное выполнение асинхронных функций"}} javascript/arith_ops -.-> lab-28192{{"Последовательное выполнение асинхронных функций"}} javascript/comp_ops -.-> lab-28192{{"Последовательное выполнение асинхронных функций"}} javascript/async_prog -.-> lab-28192{{"Последовательное выполнение асинхронных функций"}} javascript/debugging -.-> lab-28192{{"Последовательное выполнение асинхронных функций"}} end

Последовательное выполнение асинхронных функций

Для последовательного выполнения асинхронных функций откройте Терминал/SSH и введите node. Затем пройдите по массиву функций, содержащих асинхронные события, и вызовите функцию next, когда каждое асинхронное событие завершится.

Вот фрагмент кода, демонстрирующий, как последовательно выполнять асинхронные функции:

const chainAsync = (fns) => {
  let curr = 0;
  const last = fns[fns.length - 1];
  const next = () => {
    const fn = fns[curr++];
    fn === last ? fn() : fn(next);
  };
  next();
};

chainAsync([
  (next) => {
    console.log("0 seconds");
    setTimeout(next, 1000);
  },
  (next) => {
    console.log("1 second");
    setTimeout(next, 1000);
  },
  () => {
    console.log("2 second");
  }
]);

Резюме

Поздравляем! Вы завершили практическое занятие по последовательному выполнению асинхронных функций. Вы можете попрактиковаться в других практических занятиях в LabEx, чтобы улучшить свои навыки.