Правильно ли сравнивать генераторы, промисы и async/await?

Question

[krll-k]

Читаю про генератор, и понять не могу, как они работают

Единственное что понял, они тормозят выполнение кода, то есть как бы асинхронный код делают как бы синхронным. У меня есть потребность в таком, думаю у всех она есть, потому как через функции обратного вызова, код выглядит не комильфо. И тогда зреет вопрос, зачем придумали и ввели эти самые генераторы, что они призваны решить, и почему следом за ними я слышу про промисы и async/await

Допустим я разрабатываю на сервере, и поддержка браузерами мне не нужна, то на чем остановиться?

Правда ли что за async/await будущие, и что генераторы и обещания всего лишь предвестники async/await? Как раз и навсегда разобраться в столько непростом вопросе, как правильно относится к нововведениям, что стоит использовать, а от чего советуете отказаться

Чем между собой отличаются все три названных способа?

Answer 1

[kurtov]

Сначала были Промисы и девелопер понял что это хорошо. Но девелопер задумался, а можно ли перестать писать then().then()... Но async\await еще не было, тогда девелопер взял функцию генератор смешал с промисом и родилось - co Это выглядело немного страшненько (имхо), но хайп был, который наплодил много статей почему это спасение - порой слог был такой уверенный, что вводил в заблуждение. А потом появились async\await - которые промисы, но без then().then().

Промисы это промисы, их надо понять в любом случае. Зная промисы, async\await понимается быстро и полностью.
Генераторы (то что вы имеете в виду) это самописный сахар для реализации async\await подобного поведения до того как появился async\await. Т.е. это не реализация языка, а просто код обертка.
Async\await - это уже реализация языка, которая основана на промисах.

Comments

[krll-k]

мне нравиться твое толкование

[kurtov]

У вас в вопросе есть термин "генераторы". Так вот есть функции генераторы, которые ничего общего с асинхронностью не имеют. Это средство перебора, итератор. Вы скорее всего имели в виду "асинхронный генератор", что по сути является смесью генератор + промис. Очень часто в контексте статьи про асинхронные запросы такой подход просто сокращают до "генератор", что вводит в заблуждение. Сергей Новиков, например не понял вашего "генератора".

Answer 2

[Сергей Новиков]

Генераторы - это одно, промисы/async/await - другое. Генератор по сути - функция, которая запоминает свое внутреннее состояние (1, 2, 3). Генераторы нужны для создания "сложных" последовательностей.
Async/await (1, 2) задуманы как альтернатива промисам, т.к. промисы хоть и решают проблему callback hell, но все равно сложны для чтения. При этом async/await все еще экспериментальный функционал, поэтому без Babel тут не обойдешься (который собственно сведет async/await к промисам).

Comments

[Negwereth]

Не альтернатива, а логичное продолжение и развитие. Асинки базируются на нативных промисах, по-другому они невозможны

Answer 3

[krll-k]

Возьмем типичную задачу. Нужно сделать ajax запрос куда нибудь.

Так бы выглядело на Колбеках:

(function(error,callback){
  var random = Math.floor(Math.random()*2001);
  
  var res = setTimeout(function(){
    clearTimeout(rej)
    callback(random)
  },random);
  
  var rej = setTimeout(function(){
    clearTimeout(res)
    error(new Error(random))
  },1000);
})(function(num){
  console.log(num)
},function(error){
  console.log(error)
})

А так на Обещаниях:

(function(){
  return new Promise(function(resolve, reject){
    var random = Math.floor(Math.random()*2001);

    setTimeout(function(){
      resolve(random)
    },random);

    setTimeout(function(){
      reject(new Error(random))
    },1000);
  });
})()
.then(function(result){
  console.log(result)
})
.catch(function(error){
  console.log(error)
})

Допустим если сервер не может отдать больше секунды нам данные, нужно включить "please wait, loading"

Отличий на первый взгляд немного

Но вариант с Обещаниями предпочтительнее, потому как если логика будет меняться, расти, то с Колбеками с ума сойти можно

Answer 4

[ndsdmfwg]

А вот так код будет смотреться на async/await:

function timeout() {
    return new Promise((resolve, reject) => {
        var random = Math.floor(Math.random()*2001);
        setTimeout(function () {
            resolve(random);
        }, random);

        setTimeout(function () {
            reject(new Error(random.toString()));
        },1000);
    });
}

async function something() {
    try {
        var result = await timeout();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

something();

Answer 5

[SweetPony1]

Если есть Babel.
Когда нужно много взаимодействий асинхронных функций между собой, их можно объединить в асинхронной функции async () или по старому async function()

(async () => {
p1 = new Promise((resolve, reject) => {resolve('p1')})
p2 = new Promise((resolve, reject) => {resolve('p2')})
console.log(await p1 + await p2)
})()
'p1p2'

await сама дождется результата и вытащит его, как это делает then