Упрощение асинхронного кода на JavaScript с внедрением асинхронных функций из ES2016

[Finom]

Асинхронные функции — это самое крутое нововведение ECMAScript.next. Я очень удивлен, что компания, создавшая Internet Explorer 6 первой реализовала их. Я польщен.

[Fedcomp]

Ну если подумать то таже самая компания создала IE 5 в том числе.

[prairie_dog]

Что было плохого в IE6 на момент выхода?

[Finom]

На момент выхода — ничего. Проблема в том, что они не убирали поддержку браузера до тех пор, пока все разработчики не возненавидели Осла. Сейчас они молодцы, внедляют всякие крутые штуки и фиксят баги достаточно быстро. Еще бы по-быстрее IE 9-11 ушли на пенсию, мир бы стал добрее.

[justboris]

Стандарт async-функций еще не утвержден. Если в нем к моменту выхода что-то поменяется, то мы получим два разных async: в нормальных браузерах по стандарту и особое поведение в IE.

Зачем спешить реализовывать нестабильные фичи, если есть уже сделанные в других браузерах, ServiceWorkers, например.

[rock]

Текущая стадия предложения асинхронных функций 3 — кандидат — рекомендовано для имплементации в движках для получения обратной связи от имплементаторов и пользователей, но не для использования в рабочих проектах. Кстати, ServiceWorkers тоже пока только на стадии черновика.

[justboris]

Пример без async-функции искусственно усугубляет ситуацию. Я бы написал функцию httpGetJson вот так:

function httpGetJson(url) {
    // check if the URL looks like a JSON file and call httpGet.
    var regex = /\.(json)$/i;
    if (regex.test(url)) {
        return httpGet(url);
    } else {
        return Promise.reject(Error('Bad File Format'));
    }
}

Получилось ровно столько же строк, что и в async-варианте.

Перед тем, как мечтать о волшебных async-функциях, стоит внимательнее изучить то, что у нас уже есть. Например, прочитав недавнюю статью о правильном использовании Promise.

[ankh1989]

Очень уж много буков в вашей функции:

const httpGetJson = url => /\.(json)$/i.test(url) ?
  httpGet(url) :
  Promise.reject(Error('Bad File Format'));

Но так, имхо, намного лучше:

const httpGetJson = async url => /\.(json)$/i.test(url) ?
  await httpGet(url) :
  throw Error('Bad File Format');

[arvitaly]

Проблемы начинаются, когда внутри одной функции нужно несколько последовательных асинхронных вызовов. Конечно, можно разбивать все это на разные функции, но это означает, что мы думаем не об архитектуре, а о синтаксических возможностях.
Также, можно использовать Promise, then, но тогда нужно писать огромное количество шаблонного кода:

asyncPromise1().then(function(){
    return asyncPromise2();
}).then(function(arg2){
    console.log(arg2);
});

VS

await asyncPromise1();
console.log(await asyncPromise2())

[MuLLtiQ]

asyncPromise1()
  .then(asyncPromise2)
  .then(console.log);

[arvitaly]

К сожалению, ваш пример не рабочий, как минимум нужно записать так

asyncPromise1()
  .then(asyncPromise2)
  .then(console.log.bind(console));

К тому же, ваш вариант просто проглатывает возможные ошибки (нет catch), а async/await вызовут Error.

Но для продолжения дискуссии, предлагаю написать вариант еще и для такого кода:

await asyncPromise1();
console.log(await asyncPromise2() + await asyncPromise3());

[MuLLtiQ]

Так я просто переписал первый кусок кода с промисами из вашего комментария в более читабельном виде. В node, кстати console.log биндить к console не нужно, но в браузерах, конечно же, не так. Но на самом-то деле я считаю что async/await это очень хорошо и красиво и поскорее бы они были везде.

Насчет вашей задачи: я бы сделал как-то так:

var asyncPromise1 = () => Promise.resolve();
var asyncPromise2 = () => Promise.resolve('foo');
var asyncPromise3 = () => Promise.resolve('bar');

asyncPromise1()
  .then(asyncPromise2)
  .then(arg2 =>
    asyncPromise3()
      .then(arg3 => arg2 + arg3))
  .then(console.log.bind(console))  // "foobar"
  .catch(err => console.log(err));

Читабельность тут, по сравнению с async/await, конечно же, хуже, но я все еще могу понять что здесь происходит.

[Bronx]

Чуть читабельнее:

asyncPromise1()
    .then(_ => Promise.all([asyncPromise2(), asyncPromise3()])
    .then(([a2, a3]) => console.log(a2 + a3))
    .catch(err => console.log(err));

[MuLLtiQ]

да, спасибо. destructuring assignment — это шикарно

[MaximChistov]

А планируете что-то сделать с «замечательной» фичей, когда случайно вытаскиваешь вкладку в отдельное окно, перетаскиваешь ее назад, а окно, в которое она выделилась, уже без вкладок, так и висит незакрытым? Раздражает.

[trikadin]

Охренеть! Ребята, это потрясающе. Искренне жму вам руки.