Javascript → Видео-объяснение работы с асинхронными функциями (Promise/async/await)

Самое понятное объяснение работы с асинхронным кодом в javascript которое мне попадалось:

То же самое на youtube

Основной момент — async/await это просто синтаксический сахар для Promise, поэтому для понимания сначала пишем код используя Promise и только потом переходим на async/await.

Пример кода на Promise:

function fetchStatus() {
  return new Promise((resolve, reject) => {
    fetch('https://dummyjson.com/test')
      .then(response => {
        return response.json();
      })
      .then(json => {
        resolve(json.status);
      })
      .catch(error => {
        console.log(error);
        reject(error);
      });
  })
}

const resultEl = document.querySelector('#result');
fetchStatus()
  .then(status => {
    resultEl.innerHTML = status;
  })
  .catch(error => {
    resultEl.innerHTML = error.message;
  });

codepen

Пример этого же кода на async/await:

async function fetchStatus() {
  try  {
    var response = await fetch('https://dummyjson.com/test');
    var json = await response.json();
    return json.status;
  }
  catch (error) {
    console.log(error);
    throw error;
  }
}

const resultEl = document.querySelector('#result');
try {
  resultEl.innerHTML = await fetchStatus();
}
catch (error) {
  resultEl.innerHTML = error.message;
}

codepen