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

Question

[Al]

Пытаюсь изучить генераторы, написал пример:

function * getData(){
    var callback = function * (data,err) {
        if(err){
            yield err;
        }
        if(data){
            yield data;
        }
    };
    var x = $.ajax({
        url: 'http://localhost:9001/mydata',
        success: callback
    });
}
var d = getData();

Если я выполню d.next() - то вернется undefined. А я хочу сделать так, чтобы при после var d = getData() в переменной d находилось содержимое страницы /mydata. Ткните меня на ошибку, как сделать правильно?

Comments

[copal]

ну так как придет ответ, так и будет Вам data. Для асинхронных запросов лучше Promise подходят, они ждут когда загрузится и потом переходят на следующий шаг.

[copal]

Что-то сказал, но не совсем по теме... Генератор возвращает итератор, а итератору возвращать нечего, ведь в области getData нет ни одного yield.

[copal]

генератор - что-то возвращает, промис - что-то дает. В Вашем случаи нужно дождаться окончания и только потом "дать" программе команду продолжить.

[Al]

copal: Вы можете показать работающий пример на основе приведенного мной куска кода?

[copal]

Alexander K.: если и возможно сделать Ваш пример рабочим оставив его в таком виде, то лично я такого не могу. Я написал Выше для чего генераторы, они дают "сейчас". Но если ответ ещё не пришел, то ему дать просто нечего. Вот он например может брать условия для запроса из массива и возвращать промис, который загрузившись скажет "вот Вам данные" и на основе этого можно вызвать опять генератор. Как конвейер, загрузил -> next -> загрузил -> next.

[Al]

copal: я не пойму как он будет вызывать next(), можете показать пример с промисом на основе данного кода? если не составит труда.
p.s. извиняюсь за чрезмерную надоедливость)

[copal]

Alexander K.: делаю такую ерунду впервые... :)

function *getData(array){
    for( let data of array){
        yield new Promise( (resolve, reject) => resolve(data) )
    }
}

function complete(generator){
    let {done, value} = generator.next();
    
    if( ! done){
        value.then( data => {
            console.log(data);
            
            complete(generator);
        });
    }
}



let generator = getData([0, 1, 2]);

complete(generator);

[copal]

function *asynLoader(list){
    for( let data of list){
        yield new Promise( (resolve, reject) => resolve(data) );
    }
}

function queueLoader(generator, completeHandler){
    let {done, value} = generator.next();
    
    if( ! done){
        value.then( data => {
            completeHandler(data);
            
            queueLoader(generator, asyncLoader_completeHandler);
        });
    }
}

function asyncLoader_completeHandler(data){
    console.log(data);
}


let generator = asynLoader([0, 1, 2]);

queueLoader(generator, asyncLoader_completeHandler);

[Al]

copal: спасибо, но все это мало чем отличается по своей структуре от ёлки с коллбэками в es5. Я смотрю на примеры в сети, и мне кажется что все можно запилить более конструктивно, но пока еще не могу сообразить как....

[copal]

Alexander K.: смотря что Вы хотите сделать. Если асинхронные запросы, то в любом случаи нужно какую-то ерунду делать, которая будет выглядеть ужасно, но только внутри. И в вопросе Вы упомянули что учите генераторы и хотите сделать выполнение задач, но в примере запросы, которые не являются задачами. Именно задачи можно в одну строчку написать генератор, но синхронные данные с сервера Вы не сможете получить сразу.

[Al]

copal: это как-то печально, их ведь и придумали чтобы упростить написание асинхронных методов.
Сама суть, чего я хочу, чтобы написать где-то в одном месте var d = getData('url'), и в следующей строчке я уже могу делать что угодно с данными в переменной d.

[Al]

copal: пока копаю дальше, не думаю что ёлки - это выход, зачем вообще нужны тогда эти генераторы?

[copal]

Alexander K.: нет, сделали их для того, чтобы люди писали библиотеки для асинхронного кода использовали именно нативный подход, чтобы в будущем его еще и оптимизировать. Сами по себе их использование это очень редкий случай и если Вы хотите писать так каждый раз, то Вы мазохист. Так же ВОЗМОЖНО в будущем на нативном уровне сделаю async\await, которые построены как раз на генераторах. Вот с помощью этих инструкций уже можно будет писать так как Вы показываете. А пока совет, либо забудьте либо используйте препроцессор, который поддерживает уже сегодня async\await.

Answer 1

[Torna]

не полные параметры ajax
url: url,
async: true,
cache: false,

Еще область видимости нарушена.

Comments

[Al]

async: true и cache: false - необязательные параметры.
Вы можете показать правильное решение?

[Torna]

Именно параллельные запросы?
async(function *() {
try {
var result1 = $.ajax("request1");
var result2 = $.ajax("request2");
var result3 = $.ajax("request3");
// Обработка результата
let results = {"1": yield result1, "2": yield result2, "3": yield result3}
console.log(results);
} catch(xhr) {
console.log("Error: " + xhr);
}
});
Где-то примерно так, пишу с телефона проверить не могу.

[Al]

Torna: я видел этот пример, вы его скопировали и вставили сюда, я имел ввиду пример на основе мною приведенного куска кода, это даст более явное понимание

[Torna]

Хорошо, у вас неизвестно что есть data. Так как success может быть или true или false, function * (data)
{
if(data)
{
yield data;
} else {
// Тут возвращаете ошибку. Или вообще на первых парах можно от неё отказаться.

Проверяйте. Если что, будем дальше искать.

[Al]

Torna: Сделал так:

function * getData(url){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onload = function * () {
        yield this.response;
    };

    xhr.send();
};

var d = getData('/mydata');

console.log(d)

Но тоже не оно!