async/await w js

Async/await to nowe rozwiązanie do zapisu asynchronicznego kody, nowy sposób który ułatwia pisanie nam kodu. Jest to uporządkowanie znanych nam promisów.

Async

Zwraca nam zawsze obietnicę.

async function fetchData() {
  const data = await fetch();
  return data;
};

fetchData()
  .fetch(res => {
    console.log(res);
  });

Await

Javascript poczeka na wykonanie danej obietnicy do jej zakończenia i zwrócenia przez nią wyniku. Należy pamiętać aby await zawsze znajdowała się wewnątrz funkcji async.

Obsługa błędów

Możemy posłużyć się znanym try/catch

async function fetchData() {
  try {
    const response = await fetch();
    const data = await response.json();
    return data;
  } catch (err) {
    console.error(err);
  }
};

fetchData()
  .then(data => console.log(data));

Możemy również uruchomić jednocześnie kilka operacji.

async function getData() {
  const jsonplaceholder = getJsonPlaceHolder();
  const latlng = getLatLng();

  const dataJsonplaceholder = await jsonplaceholder;
  const dataLatlng = await latlng;

  saveData(dataJsonplaceholder, dataLatlng);
}

Promise.all
Wykorzystanie w połączeniu z Promise.all

async function getData() {
  const jsonplaceholder = getJsonPlaceHolder();
  const latlng = getLatLng();

  return Promise.all([jsonplaceholder, latlng]);
}

getData().then(...)

Całość może wyglądać tak:

const api = 'https://jsonplaceholder.typicode.com/todos/1';

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (err) {
    console.error(err);
  }
};

fetchData(api)
  .then(data => console.log(data));