Как определяешь что операция асинхронная?

Как определить асинхронную операцию

В JavaScript операция считается асинхронной, если она не блокирует выполнение остального кода. Есть несколько способов определить, является ли операция асинхронной.

1. По типам данных, которые возвращает функция

Promise - классический признак асинхронной операции:

// Функция возвращает Promise - это асинхронная операция
function fetchData() {
  return fetch('/api/data'); // fetch возвращает Promise
}

const result = fetchData();
console.log(result); // Promise { <pending> }
console.log(result instanceof Promise); // true

// Можем добавить .then() или await
fetchData()
  .then((response) => response.json())
  .then((data) => console.log(data));

async/await функции также возвращают Promise:

async function getUserData() {
  return { id: 1, name: 'John' };
}

const result = getUserData();
console.log(result instanceof Promise); // true

// Несмотря на то, что функция возвращает объект,
// async функция всегда оборачивает результат в Promise
await getUserData(); // { id: 1, name: 'John' }

2. По использованию Web API или встроенных асинхронных функций

Если операция использует эти API, она асинхронная:

// Сетевые операции (всегда асинхронные)
fetch('/api/data');
const xhr = new XMLHttpRequest(); // async по умолчанию

// Работа с таймерами
setTimeout(() => {}, 1000);
setInterval(() => {}, 1000);
requestAnimationFrame(() => {});

// Работа с файловой системой (в Node.js)
fs.readFile('file.txt', (err, data) => {});
fs.promises.readFile('file.txt'); // Promise-based

// Работа с локальным хранилищем (IndexedDB)
const request = indexedDB.open('database');
request.onsuccess = (event) => {};

// Получение доступа к аппаратуре
navigator.geolocation.getCurrentPosition((position) => {});
navigator.mediaDevices.getUserMedia({ video: true });

3. По наличию callback функции как аргумента

Если функция принимает callback - часто это признак асинхронности (в старом коде):

// Callback-based асинхронность (старый стиль)
function loadFile(filename, callback) {
  setTimeout(() => {
    callback(null, 'file content');
  }, 1000);
}

loadFile('data.txt', (error, data) => {
  if (error) console.error(error);
  else console.log(data);
});

// Но не все функции с callback асинхронные!
// Это синхронная функция с callback
const numbers = [1, 2, 3, 4];
numbers.forEach((num) => {
  console.log(num); // Выполняется сразу, синхронно
});

4. Практический способ - проверка во время выполнения

Можешь проверить, блокирует ли операция код:

// Синхронная операция - блокирует
console.log('Before');
const data = JSON.parse('{"a": 1}'); // Блокирует код
console.log('After'); // Выполняется только после парсинга

// Асинхронная операция - не блокирует
console.log('Before');
fetch('/api/data').then(r => r.json()).then(d => console.log(d));
console.log('After'); // Выполняется ДО того, как данные загружены!

// Вывод:
// Before
// After
// (затем приходят данные из fetch)

5. Анализ кода - как определить визуально

// АСИНХРОННАЯ операция - признаки:
function example1() {
  // 1. Возвращает Promise или async функция
  return new Promise((resolve) => {
    setTimeout(() => resolve('done'), 1000);
  });
}

function example2() {
  // 2. Использует setTimeout, setInterval, fetch и т.д.
  fetch('/api/data').then(r => r.json());
}

async function example3() {
  // 3. Использует await
  const data = await fetchSomething();
  return data;
}

// СИНХРОННАЯ операция - признаки:
function synchronous1() {
  // Прямое изменение переменной
  const x = 1 + 2;
  return x;
}

function synchronous2() {
  // Работа с массивом без async
  return [1, 2, 3].map(n => n * 2);
}

6. Проверка в React компоненте

function DataComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  // Определяю асинхронную операцию
  const fetchData = async () => {
    setLoading(true); // Показываю, что операция асинхронная
    try {
      // async операция - может заняться время
      const response = await fetch('/api/data');
      const json = await response.json();
      setData(json);
    } finally {
      setLoading(false);
    }
  };

  // Вызову асинхронную операцию только когда компонент монтируется
  useEffect(() => {
    fetchData();
  }, []);

  // Необходимо показать состояние загрузки для асинхронных операций
  if (loading) return <div>Загрузка...</div>;
  if (!data) return <div>Нет данных</div>;

  return <div>{JSON.stringify(data)}</div>;
}

7. Таблица: Синхронные vs Асинхронные

СИНХРОННЫЕ:
- JSON.parse() / JSON.stringify()
- Array.map(), Array.filter(), Array.reduce()
- String методы: split(), slice(), replace()
- Math операции
- Условные операторы, циклы

АСИНХРОННЫЕ:
- fetch(), axios()
- setTimeout(), setInterval()
- Promise.all(), Promise.race()
- async/await
- fs.readFile(), fs.promises.readFile()
- navigator.geolocation.getCurrentPosition()
- IndexedDB операции
- WebSocket

8. Отличие в обработке

// СИНХРОННАЯ - используй результат сразу
const json = JSON.parse('{"a": 1}');
console.log(json.a); // 1

// АСИНХРОННАЯ - используй then/await/callback
const dataPromise = fetch('/api/data').then(r => r.json());
// Не можешь использовать результат здесь! Это Promise
// console.log(dataPromise.a); // undefined

// Правильно:
const data = await fetch('/api/data').then(r => r.json());
console.log(data); // Теперь это объект, не Promise

// Или с .then()
fetch('/api/data')
  .then(r => r.json())
  .then(data => console.log(data)); // Здесь можем использовать результат

Резюме

Операция асинхронная, если:

1. Функция возвращает Promise
2. Функция объявлена с async ключевым словом
3. Использует Web API (fetch, setTimeout, geolocation и т.д.)
4. Не блокирует выполнение остального кода
5. Требует обработки через .then(), .catch() или await
6. Для её результата нужно ждать или использовать callback

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