React API - В чем разница между синхронности и асинхронности?

Question

Изучаю React - API, столкнулся с двумя понятиями - синхронность и асинхронность, что такое синхронность и асинхронность? и в чем разница между ними?

Answer 1

React к этому никак не относится, просто код бывает синхронным и асинхронным.

Синхронный код идет по порядку:

const arrOfNumbers = [1, 2, 3];

for (const item of arrOfNumbers) {
  console.log(item);
}

console.log("Выполнение завершено");

Как вы видите, "Выполнение завершено" выводится после исполнения цикла.

Что было бы, если бы цикл был асинхронным:

const arrOfNumbers = [1, 2, 3];

setTimeout(() => {
  for (const item of arrOfNumbers) {
    console.log(item);
  }
});

console.log("Выполнение завершено");

Как вы можете видеть, "Выполнение завершено" вывелось до исполнения асинхронной функции с циклом. Так как она асинхронная, программа не ждет её исполнения, а идет дальше.

Как эти знания могут пригодиться на практике:

Допустим, нам нужно сделать функцию, получающую посты с сайта и возвращающую их:

function takeData() {
  let data;
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(res => res.json())
    .then(res => data = res);
   return data;
}

console.log(takeData());

В данном случае вернулось undefined, так как мы не дождались исполнения асинхронной функции fetch().

Вот, как можно это исправить:

async function takeData() {
  let data;
  await fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(res => res.json())
    .then(res => data = res);
   return data;
}

takeData().then(res => console.log(res))

Здесь мы при помощи async/await явно указываем, что fetch() должна исполниться синхронно.

Ещё можно так:

function takeData() {
  return fetch("https://jsonplaceholder.typicode.com/posts/1")
}

takeData()
  .then(res => res.json())
  .then(res => console.log(res))

Здесь мы просто возвращаем fetch(), а уже его обрабатываем вне функции.

Вот полезные ссылки:

БЛОГ НА HUSL

React API - В чем разница между синхронности и асинхронности?

Ответы (1 шт):