Полное руководство по асинхронному JavaScript

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

const firstCar = 'first car';
const secondCar = 'second car';

console.log('Start ' + firstCar);
console.log('Start ' + secondCar);

Результат выполнения кода.

Start first car
Start second car

Но что произойдет, если первая машина сломается? Должны ли все остальные машины ждать? У кого есть на это время?

const firstCar = 'broken';
const secondCar = 'second car';

if (firstCar === "broken") {
  throw Error("The first car is broken. Everybody stop.");
}

console.log('Start ' + firstCar);
console.log('Start ' + secondCar);

Результат выполнения кода.

Error: The first car is broken. Everybody stop.

Не лучше ли было бы, чтобы каждая машина не зависела от предыдущей? Почему нас должно волновать, если какая-то машина сломана? Если моя машина работает, почему я должен ждать, пока кто-нибудь заведет ее машину? Разве я не могу просто объехать ее? Это и позволяет нам делать асинхронный JavaScript. Он создает для нас еще одну «полосу». Асинхронность означает, что если JavaScript должен дождаться завершения операции, он выполнит остальную часть кода во время ожидания. Мы можем переместить наши действия с основной линии и выполнять их в своем собственном темпе, позволяя им заниматься своими делами. И как мы этого добиваемся? Используя обратные вызовы, промисы и async/await.

Функции обратного вызова (callback)

Обратные вызовы — это функции, вложенные в другую функцию в качестве аргумента. Их можно использовать как часть синхронного или асинхронного кода. Синхронный обратный вызов выполняется во время выполнения функции высшего порядка, которая использует обратный вызов.

function startFirst(car, callback) {
  console.log("Start " + car);
  callback();
}

// функция обратного вызова
function startSecond() {
  console.log("Start second car");
}

// передача функции как аргумент
startFirst("first car", startSecond);

Результат выполнения кода.

Start first car
Start second car

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

function fixMyCar(car) {
  setTimeout(() => {
    console.log(`Fixing your ${car}.`);
  }, 1000);
}

function driveMyCar(car) {
  console.log(`Driving my new ${car}.`);
}

let myCar = "BMW x5";

fixMyCar(myCar);
driveMyCar(myCar);

Результат выполнения кода.

Driving my new BMW x5.
Fixing your BMW x5.

JavaScript сначала выполнил синхронный код (в нашем случае вызов функции driveMyCar()), а затем через 1000 миллисекунд записал результат fixMyCar(). Но как мы можем водить машину, если она еще не починена? Мы должны передать функцию driveMyCar() в качестве колбэка функции fixMyCar(). Таким образом, функция driveMyCar() не будет выполняться до тех пор, пока автомобиль не будет отремонтирован.

function fixMyCar(car, callback) {
  setTimeout(() => {
    console.log(`Fixing your ${car}.`);
    callback(car);
  }, 1000);
}

function driveMyCar(car) {
  console.log(`Driving my new ${car}.`);
}

let myCar = "BMW x5";

fixMyCar(myCar, driveMyCar);

Результат выполнения кода.

Fixing your BMW x5.
Driving my new BMW x5.

Что ж, отлично, мы починили нашу машину и теперь можем на ней ездить. Но что, если нашу машину нельзя починить? Как мы будем обрабатывать ошибки? А как насчет ремонта нескольких автомобилей каждый день? Давайте посмотрим на это в действии.

function fixMyCar(car, success, failure) {
  setTimeout(() => {
    car ? success(car) : failure(car);
  }, 1000);
}

const car1 = "BMW x5";
const car2 = "Toyota RAV4";
const car3 = "Honda Civic";

fixMyCar(
  car1,
  function (car1) {
    console.log(`Fixed your ${car1}.`);
    fixMyCar(
      car2,
      function (car2) {
        console.log(`Fixed your ${car2}.`);
        fixMyCar(
          car3,
          function (car3) {
            console.log(`Fixed your ${car3}.`);
          },
          function (car3) {
            console.log(`Your ${car3} car can not be fixed.`);
          }
        );
      },
      function (car2) {
        console.log(`Your ${car2} car can not be fixed.`);
      }
    );
  },
  function (car1) {
    console.log(`Your ${car1} car can not be fixed.`);
  }
);

Результат выполнения кода.

Fixed your BMW x5.
Fixed your Toyota RAV4.
Fixed your Honda Civic.

У вас кружится голова, пытаясь понять это? Не волнуйтесь, вы не одиноки. Есть причина, по которой это явление называется callback hell. Кроме того, обратите внимание, что если одна из машин разбита, то есть ее не получается определить, другие машины даже не получат шанса на ремонт.

function fixMyCar(car, success, failure) {
  setTimeout(() => {
    car ? success(car) : failure(car);
  }, 1000);
}

const car1 = "BMW x5";
const car2 = undefined;
const car3 = "Honda Civic";

fixMyCar(
  car1,
  function (car1) {
    console.log(`Fixing your ${car1}.`);
    fixMyCar(
      car2,
      function (car2) {
        console.log(`Fixing your ${car2}.`);
        fixMyCar(
          car3,
          function (car3) {
            console.log(`Fixing your ${car3}.`);
          },
          function (car3) {
            console.log(`Your ${car3} car can not be fixed.`);
          }
        );
      },
      function (car2) {
        console.log(`Your ${car2} car can not be fixed.`);
      }
    );
  },
  function (car1) {
    console.log(`Your ${car1} car can not be fixed.`);
  }
);

Результат выполнения кода.

Fixing your BMWx5.
Your undefined car can not be fixed.

Промисы (Promise)

Promise — это объект, который можно использовать для получения результата асинхронной операции, когда этот результат недоступен прямо сейчас. Поскольку код JavaScript выполняется неблокирующим образом, промисы становятся необходимыми, когда нам нужно дождаться какой-либо асинхронной операции, не задерживая выполнение остального кода. Промисы JavaScript — это объект, который может находиться в одном из трех состояний.

• Pending (в ожидании) - обещание еще не выполнено (ваша машина у механика)
• Fulfilled (выполнено) - запрос выполнен успешно (автомобиль отремонтирован)
• Rejected (отклонено) - запрос не выполнен (автомобиль не может быть починен)

Чтобы создать промис в JavaScript, используйте ключевое слово new и внутри конструктора передайте функцию-исполнитель. Затем эта функция отвечает за разрешение или отклонение промиса. Давайте представим следующий сценарий. Если нашу машину починят, то мы сможем отправиться в отпуск. Там мы можем осмотреть достопримечательности, затем мы можем сделать несколько снимков, опубликовать их в социальных сетях. Но если машину нельзя починить, то придется остаться дома. Давайте напишем наши шаги.

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

Используем setTimeout для имитации асинхронности.

const mechanicsPromise = new Promise(
  (resolve, reject) => {
    setTimeout(() => {
      const fixed = true;
      if (fixed) resolve("Car is fixed");
      else reject("Car can not be fixed");
    }, 2000);
});

console.log(mechanicsPromise);

Результат выполнения кода.

Promise { <pending> }

[[Prototype]]: Promise
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined

Но почему PromiseResult - undefined? Разве ваш механик не говорил вам, что попытается починить вашу машину? Нет, ваш механик вас не обманывал. Что мы забыли сделать, так это обработать промис. И как мы это делаем? Используя методы .then() и .catch().

const mechanicsPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const fixed = true;
    if (fixed) resolve("Car is fixed");
    else reject("Car can not be fixed. Go home");
  }, 2000);
});

mechanicsPromise
  .then((message) => {
    console.log(`Success: ${message}`);
  })
  .catch((error) => {
    console.log(error);
  });

Результат выполнения кода.

[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Success: Car is fixed

Как видно из блока кода выше, мы используем .then() для получения результата метода resolve() и .catch() для получения результата метода reject(). Наша машина починена, и теперь мы можем отправиться в отпуск и сделать все, что планировали. Метод .then() возвращает новое промис с результатом, преобразованным в значение. Мы можем вызвать метод .then() для возвращенного промиса следующим образом:

const mechanicsPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const fixed = true;
    if (fixed) resolve("Car is fixed");
    else reject("Car can not be fixed");
  }, 2000);
});

mechanicsPromise
  .then((message) => {
    console.log(`Success: ${message}`);
    message = "Go sight seeing";
    return message;
  })
  .then((message) => {
    console.log(message);
    message = "Take some pictures";
    return message;
  })
  .then((message) => {
    console.log(message);
    message = "Posting pictures on social media";
    console.log(message);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Go home");
  });

Результат выполнения кода.

Success: Car is fixed
Go sight seeing
Take some pictures
Posting pictures on social media
Go home

Как вы можете видеть, после каждого вызова метода .then() мы вызывали еще один .then() с сообщением от предыдущего .then(). Мы также добавили .catch() для обнаружения любых ошибок, которые могут возникнуть. Если мы поедем или не поедем в отпуск, нам обязательно придется вернуться домой. Это то, что делает .finally(), этот метод всегда выполняется независимо от того, выполнено ли обещание или отклонено. Другими словами, метод .finally() выполняется, когда обещание (promise) выполнено. Наш код выглядит немного лучше, чем когда мы использовали колбэки. Но мы можем сделать это еще лучше с помощью специального синтаксиса под названием async/await. Это позволяет нам работать с промисами более удобным способом.

async/await

async/await позволяет нам писать промисы, но код будет выглядеть синхронным, хотя на самом деле он асинхронный. Под капотом мы все еще используем Promise. async/await — это синтаксический сахар, а это означает, что хотя он и не добавляет к нашему коду никаких новых функций, его приятнее использовать.

const mechanicsPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const fixed = true;
    if (fixed) resolve("Car is fixed");
    else reject("Car can not be fixed");
  }, 2000);
});

async function doMyThing() {
  let message = await mechanicsPromise;
  console.log(`Success: ${message}`);

  message = "Go sight seeing";
  console.log(message);

  message = "Take some pictures";
  console.log(message);

  message = "Posting pictures on social media";
  console.log(message);
  console.log("Go home");
}

doMyThing()

Результат выполнения кода.

Success: Car is fixed
Go sight seeing
Take some pictures
Posting pictures on social media
Go home

Как видите, ключевое слово await заставляет функцию приостанавливать выполнение и ждать разрешенного промиса, прежде чем оно продолжится. Ключевое слово await можно использовать только внутри асинхронной функции. А что, если машина сломается? Как мне обрабатывать ошибки с этим новым синтаксисом? Мы можем использовать блок try/catch.

const mechanicsPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const fixed = false;
    if (fixed) resolve("Car is fixed");
    else reject("Car can not be fixed");
  }, 2000);
});

async function doMyThing() {
  try {
    let message = await mechanicsPromise;
    console.log(`Success: ${message}`);

    message = "Go sight seeing";
    console.log(message);

    message = "Take some pictures";
    console.log(message);

    message = "Posting pictures on social media";
    console.log(message);
    console.log("Go home");
  } catch (error) {
    console.log(error);
  }
}

doMyThing();

Результат выполнения кода.

Your car can not be fixed

Используйте блок try/catch только в том случае, если вызов помечен как await. В противном случае исключение не будет поймано.

Подписывайтесь на наш Boosty и задавайте ваши вопросы через форму. Я запишу видео-ответы или статьи, где вы сможете получить быстрый ответ на интересующие именно вас вопросы. Если вы начинающий фронтенд-разработчик, это лучшая возможность получить ответ на вопрос, который вы стеснялись задать коллегам. А еще на Boosty вас уже ожидают эксклюзивные статьи и видео на актуальные темы. Итак, теперь рассмотрим вопросы с собеседований:

Управляемые и неуправляемые компоненты

Элемент называется управляемым, если его значение контролирует React. Эта тема связана с такими HTML элементами как input, textarea, select. Обычно эти элементы сами управляют своим состоянием и сами обновляются когда пользователь вводит данные. Это неуправляемые компоненты - они хранят свои данные прямо в DOM. Чтобы прочитать их значения, используются рефы. Для того чтобы сделать управляемый компонент, нужно чтобы значение этих элементов хранилось именно в состоянии React компонента, т.е. управлялось через setState/useState, таким образом состояние React-компонента становится единственным источником правды для этих элементов.

// Управляемый компонент
import React, { useState } from 'react'

export function ControlledInput() {
  const [name, setName] = useState('')

  function handleNameChange(event) {
    setName(event.target.value)
  }

  function handleSubmit(event) {
    event.preventDefault()
    console.log(name)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}

// Неуправляемый компонент
import React, { useRef } from 'react'

export function UncontrolledInput() {
  const nameInput = useRef()

  function handleSubmit(event) {
    event.preventDefault()
    console.log(nameInput.current.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameInput} defaultValue="" />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}

Исходный код

Что такое контекст в React (React Context)?

Контекст позволяет передавать данные через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях. Обычно данные в React-приложении передаются от родителя к дочернему компоненту через пропсы (Как передавать данные между компонентами в ReactJS). Но когда компонентов много или множество компонентов должны быть изменяемы в зависимости от темы - то передавать пропсы для такого случая очень сложно. Для решения этой проблемы можно использовать контекст. Контекст предоставляет способ делиться такими данными между компонентами без необходимости явно передавать пропсы через каждый уровень дерева компонентов. Создаем контекст.

// context.js
import { createContext } from 'react'

export const Context = createContext()

Оборачиваем пользователей этого контекста в тег <Context.Provider /> и передаем внего значения через проп value.

// Component.js
import { useState } from 'react'
import { Context } from './context'

import Parent from './Parent'

export const Component = () => {
  const [name, setName] = useState()

  return (
    <Context.Provider value={{ name, setName }}>
      <Parent />
    </Context.Provider>
  )
}

В компоненте Parent вызываем функцию setName из контекста.

// Parent.js
import { useContext } from 'react'

import { Context } from './context'
import Child from './Child'

export const Parent = () => {
  const { setName } = useContext(Context)

  const handleNameChange = (event) => {
    setName(event.target.value)
  }

  return (
    <>
      <input
        type="text"
        onChange={handleNameChange}
      />

      <Child />
    </>
  )
}

В компоненте Child читаем из контекста значение name.

// Child.js
import { useContext } from 'react'
import { Context } from './context'

export const Child = () => {
  const { name } = useContext(Context)

  return (
    <span>Name is: {name || '<Not set>'}</span>
  )
}

Что такое порталы в React?

Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится вне DOM-иерархии родительского компонента. Порталы особенно спасают когда в родительском компоненте заданы стили overflow: hidden или z-index, и нужно, чтобы дочерний элемент визуально выходил за рамки своего контейнера. Это диалоги, модальные окна или всплывающие подсказки.

Что такое refs в React и в чем их важность?

Рефы дают возможность получить доступ к DOM-узлам или React-компонентам. Ситуации, в которых использование рефов является оправданным:

• Управление фокусом, выделение текста или воспроизведение медиа;
• Императивный вызов анимаций;
• Интеграция со сторонними DOM-библиотекам;
• и др.

В рефах можно хранить любое значение, не обязательно ссылку на элемент. Изменение поля current не приводит к реренденру компонента.

import React, { useRef } from 'react'

export function UncontrolledInput() {
  const nameInput = useRef()

  function handleSubmit(event) {
    event.preventDefault()
    console.log(nameInput.current.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameInput} defaultValue="" />
      <button type="submit">Submit</button>
    </form>
  )
}

Что такое key в React и в чем их важность?

Key - это специальный строковый атрибут, который нужно указывать при создании списка элементов. Если мы хотим показать компоненты в списке то нужно указать эти ключи явно, чтобы помочь React определять, какие элементы были изменены, добавлены или удалены. Далее React сопоставляет элементы массива с течением времени. Если у элемента есть id то лучше всего использовать именно это значение в качестве ключа. В крайнем случае можно использовать индекс элемента как ключ. Если порядок элементов может поменяться, использовать индексы в качестве ключей крайне не рекомендуется. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента. Еще один сценарий использования key

Render props

Render prop относится к возможность разделять код между компонентами с помощью пропа, значение которого является функцией. Render prop — функция, которая сообщает компоненту, что необходимо рендерить.

// Example.jsx
import React, { useState } from "react";
import Button from "react-bootstrap/Button";

import { CartIcon } from "./CartIcon/CartIcon";

const renderBadge = (count) => {
  return (
      <div>{count}</div>
  );
};

export const Example = () => {
  const [cart, setCart] = useState([]);

  const handleClick = () => {
    console.log("Cart Item clicked");
  };

  return (
    <CartIcon
      renderBadge={() => renderBadge(cart.length)}
      onClick={handleClick}
    />
  );
};

// CartIcon.jsx
import React from "react";
import { MdShoppingCart } from "react-icons/md";

export const CartIcon = ({ renderBadge = () => null, onClick }) => {
  return (
    <div onClick={onClick}>
      <div>{renderBadge()}</div>
      <MdShoppingCart />
    </div>
  );
};

Исходный код

Что такое Redux?

Redux - это стэйт менеджер для JS приложений. Он может работать не только в React приложениях. Он хранит состояние в дереве объектов внутри единого стора. Единственная возможность изменить состояние - отправить action. Action - это объект, который описывает действие (он отвечает на вопрос: "Что я хочу изменить в состоянии?"). Далее action попадает в reducer, где описано, как состояние должно быть изменено. (reducer отвечает на вопрос: "Как я хочу изменить стэйт?").

Как реализовать сайд эффекты в Redux

Сайд эффект - это действие, которые должно произойти на диспатчинг экшена, помимо после сохранения в стор, например, логирование в консоль или отправка запроса на сервер. Основной способ сделать сайд эффект - вызвать его в middleware. Можно написать свой middleware, а можно использовать сторонние библиотеки, например, redux thunk - для синхронных и простых асинхронных действий или redux saga - для сложных асинхронных действий. Можно вызывать сайд эффекты в action сreator'ах. Однако, это не самый лучший способ, т.к. можно задиспатчить действие и без вызова action creator, тогда сайд эффект не сработает.

React - реактивен?

Начнем с того, что React-компоненты это функции, которые мы не вызываем на прямую. Эти функции в некоторые моменты возвращают описание того что нужно рендерить. Эти функции вызывает сам React в те самые "некоторые" моменты. И React может отложить этот вызов. React рекурсивно обходит дерево компонентов и может применять оптимизации - и задерживать рендеры чтобы избежать потерю кадров. React в первую это UI фреймворк, и для того чтобы избежать тормозов такие меры оправданы. Т.к. данные могут поступать быстрее чем скорость обновления кадров - есть смысл объединять обновления в пакеты и обновлять пакетами. Поэтому React это скорее «Планировщик», и реактивность не провалятся в React в чистом виде.

Что такое синтетические события в React?

SyntheticEvent это обёртка над нативными событиями. SyntheticEvent является частью системы событий React. Ваши обработчики событий получают экземпляр SyntheticEvent, это кроссбраузерная обёртка над нативным экземпляром события. У неё такой же интерфейс, как и у нативного события, включая методы stopPropagation() и preventDefault(). Эта обёртка помогает событиям работать одинаково во всех браузерах. Еcли всё-таки нужно получить нативное браузерное событие, следует обратиться к атрибуту nativeEvent. Синтетические события отличаются от нативных событий браузера и непосредственно не связаны с ними.

Как работает браузер?

Обо всех шагах, которые совершает браузер при переходе на страницу вы можете найти в этом посте.

Задачи на написание кода

Подробный разбор одной из задач с реального собеседования вы можете найти на Boosty. Там вы можете найти как неоптимальный вариант решения, так и оптимальный. С описанием сложности каждого варианта решения в нотации Big "O" notaion. Также по теме собеседований рекомендую прочитать:

• Полное руководство по React
• ТОП 10 вопросов на собеседовании ReactJS
• Собеседование фронтенд разработчика. ТОП вопросов по HTTP и CORS
• Вопросы по React на собеседовании