Генераторы и Promise. Зачем использвовать вместе?

Question

[Бруто]

Зачем использовать генераторы и промисы вместе? Тоесть функцию которая итерирует генератор и по очереди получат от него промисы.
Генератор yeld-ит промисы. Зачем делать так если можно просто использовать .then
Зачем это :

function* gen() {
 yield makeProm("first");
 yield makeProm("second");
 yield makeProm("first2.0");
 yield makeProm("second2.0");

}


function makeProm(msg){
  return new Promise(function(resolve,reject){
    console.log('promised')
    resolve(msg)
  
  }
  )
}


let iter = gen();


function iterStep() {
  let result =  iter.next();
 
  if(!result.done){
    console.log(result.value)
    result.value.then(msg => console.log(msg))
    iterStep();
  }
}

iterStep();

Если можно так :

function makeProm(msg){
  return new Promise(function(resolve,reject){
    console.log('promised')
    resolve(msg)
  
  }
  )
}

makeProm("first").then(msg => {console.log('promised'); console.log(msg); return 'second'})
.then(msg => {console.log('promised'); console.log(msg); return 'first2.0'})
.then(msg => {console.log('promised'); console.log(msg); return 'second2.0'})
.then(msg => { console.log(msg);})

(Не понимаю главу 6.4 в книге Javacript Ninja После перехода пролистается в нужное место

Answer 1

[ⓒⓢⓢ]

Зачем это :

для последовательного выполнения промисов

Если можно так :

неправильно переписали логику, у вас по веткам .then() передаются не асинхронные промисы, а просто строки.
Для наглядности представьте, что makeProm выполняет http запрос на сервер, где параметр msg - это url адрес

чтобы повторить одинаковую логику придётся промисы выполнять в промисах,
тем самым запутывая ветвление then\catch и усложняя логику обработку ошибок

это будет примерно так:

makeProm("first")
.then(msg => {console.log('promised'); console.log(msg); return makeProm('second')})
// .then(/* тут Успех для промиса 'second' ... и запускаем промис 'first2.0' */)
// .catch(/* тут Ошибка для промиса 'second' */)
.then(msg => {console.log('promised'); console.log(msg); return makeProm('first2.0')})
// .then(/* тут Успех для промиса 'first2.0' ... и запускаем промис 'second2.0' */)
// .catch(/* тут Ошибка для промиса 'first2.0' */)
.then(msg => {console.log('promised'); console.log(msg); return makeProm('second2.0')})
// .then(/* тут Успех для промиса 'second2.0' */)
// .catch(/* тут Ошибка для промиса 'second2.0' */)
//
// В следующем блоке .then() мы уже потеряли данные из предыдущих промисов (тут будет последний промис)
// Тоже самое и с ".catch" блоками, если у каждого промиса не обработать ошибку,
// то ошибка может произойти в первом промисе, а перехватим её уже в последнем блоке,
// без идентификации из какого промиса мы словили ошибку
.then(msg => { console.log(msg) })
.catch(err => { console.log(err) })

ну как то так...

Comments

[Бруто]

Ну вот ваш пример. Он рабочий же? Так зачем генератор если можно так(как у вас написано)

[ⓒⓢⓢ]

BruTO8000,

Так зачем генератор если можно так

вопрос "зачем" - если у вас нет задачи, под такой кейс, то незачем.
да и JS вас не спрашивает - нужно вам такое или нет - это просто есть :)

составьте цикличное выполнение последовательных промисов?

• с итераторами это можно добиться переписав генератор, не возвращая "result.done" как "true"
  и обновлять "индекс выполненного шага"
  
  
• с промисами это будет что-то похожее на функцию обёртки.
  из-за цикличного вызова без завершения - каждый новый цикл будет отжирать память, не очищая
  за собой кучу
  

[Бруто]

ⓒⓢⓢ, но в принципе же это одно и тоже по сути, верно?

[GrayHorse]

then автоматически обрачивает возвращаемое значение в Promise. Вместо makeProm() есть Promise.resolve().

Answer 2

[GrayHorse]

В первом примере сразу же создаются четыре микротаски (добавляются в очередь для микрозадач). Во втором же примере, микротаски создаются по одной, как только разрешится предыдущая.

// Второй пример:
Promise.resolve("A__2")
    .then(message => {console.log(message); return "B__2"})
    .then(message => {console.log(message); return "C__2"})
    .then(message => {console.log(message); return "D__2"})
    .then(message => {console.log(message);});

// Первый пример (да, вот так это должно выглядеть):
function* messageGenerator() {
    yield Promise.resolve("A");
    yield Promise.resolve("B");
    yield Promise.resolve("C");
    yield Promise.resolve("D");
}
    
for (const messagePromise of messageGenerator()) {
    messagePromise.then(message => console.log(message + "1"));
}

Вывод:

A__2
A1
B1
C1
D1
B__2
C__2
D__2

Answer 3

[Бруто]

В первом примере где работает генератор мы всегда сможем отложить, продолжить и модифицировать, следовательно - создавать новые асинхронные операции, изменяя их не завися от времени.
Пример - нам нужно с 5 разных серверов получить данные, но после каждого получения, следующий запрос должен опираться на выборе пользователя. Так-же мы это дело можем отложить. Генераторы в этом случае очень мощная штука, и код будет легче писать, и структуру легче менять.