3 примера асинхронного вызова функции в JavaScript

Примеры показывают три разных подхода к организации кода. Все 3 примера выполняют одно и тоже.

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

// callbacks
getData((a) => {
    getMoreData(a, (b) => {
        getMoreData(b, (c) => {
            getMoreData(c, (d) => {
                getMoreData(d, (e) => {
                    console.log(e);
                })
            })
        })
    })
});

Обещания

// promises 
getData()
    .then(a => getMoreData(a))
    .then(b => getMoreData(b))
    .then(c => getMoreData(c))
    .then(d => getMoreData(d))
    .then(e => console.log(e));

Async/await

"синтаксический сахар" для обещаний

// async/await 
(async () => {
    const a = await getData();
    const b = await getMoreData(a);
    const c = await getMoreData(b);
    const d = await getMoreData(c);
    const e = await getMoreData(d);
    console.log(e);
})();

https://twitter.com/manekinekko/status/855931622780272640

Похожие записи

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Поисковый запрос с помощью RxJS

Показательная и востребованная задача. Получение набираемого запроса из поля ввода через полсекунды после того, как пользователь закончил ввод с показом лоадера.

RxJS. Delay from array

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);

JS. Get query param

function getQueryParam(item) {
  var svalue = window.location.search.match(new RegExp('[\?\&]' + item + '=([^\&]*)(\&?)', 'i'));
  return svalue ? svalue[1] : svalue;
}

// /foo/bar/baz.html?lang=ru
var lang = getQueryParam('lang') || 'en';