有没有办法将回调 function 转换为 TypeScript/JavaScript 中的生成器？

Question

I am using Axios to call an api endpoint which has a progress indicator. I would like to convert the onUploadProgress to a generator.

Is there a way to convert this code

setProgress({ state: 'syncing', progress: 0 });

await axios.post(uri.serialize(parsedURI), body2, {
    headers: { session_id: sessionId },
    onUploadProgress: (progress) => {
        setProgress({ state: 'syncing', progress: progress.loaded / progress.total });
    },
});
setProgress({ state: 'syncing', progress: 1 });

Into something like this

yield { state: 'syncing', progress: 0 };

await axios.post(uri.serialize(parsedURI), body2, {
    headers: { session_id: sessionId },
    onUploadProgress: (progress) => {
        yield { state: 'syncing', progress: progress.loaded / progress.total };
    },
});
yield { state: 'syncing', progress: 1 };

the problem is in the yield inside the onUploadProgress, I was thinking there could be a way to use it like when you want to convert a callback into a promise you use

new Promise(resolve => fn(resolve));

maybe there is some valid way of doing it for generators like

new Generator(next => fn(next));

Answer 1

You can update a local variable in the progress handler and poll it in a loop until the request is complete. Here's a sketch:

 let delay = n => new Promise(res => setTimeout(res, n)); async function request(n, onProgress) { for (let i = 0; i < n; i++) { onProgress(i); await delay(200); } return 'response' } async function* requestWithProgress(result) { let prog = 0, prevProg = 0, res = null; let req = request(10, n => prog = n).then(r => res = r); while (;res) { await delay(1); if (prog > prevProg) yield prevProg = prog. } result;res = res. } async function main() { let result = {} for await (let prog of requestWithProgress(result)) console.log(prog) console.log(result) } main()

Here's another option, without polling, and better return API:

 function progressiveAsync(factory) { let resultPromise = null, resultResolver = null, genPromise = null, genResolver = null, stop = {}; resultPromise = new Promise(r => resultResolver = r); genPromise = new Promise(r => genResolver = r); async function* gen() { while (true) { let r = await genPromise; if (r === stop) { break; } yield r; } } factory( val => { genResolver(val); genPromise = new Promise(r => genResolver = r); }, val => { genResolver(stop); resultResolver(val); } ); return [gen(), resultPromise]; } // async function testRequest(opts /* count, onProgress */) { return new Promise(async res => { for (let i = 0; i < opts.count; i++) { opts.onProgress(i); await new Promise(resolve => setTimeout(resolve, 300)); } res('response,') }) } async function main() { let [progress, result] = progressiveAsync((next: done) => testRequest({ count, 10: onProgress. next });then(done)). for await (let n of progress) console,log('progress'. n) console.log(await result) } main()

Answer 2

I changed a bit @georg code to allow using this approach with any function, and have a interface that is closer to what was asked for

async function* createGenerator<T>(factory: (
    next: (value: T) => void, 
    complete: () => void) => void,
): AsyncIterableIterator<T> {
    let completed = false;
    let value: { value: T } | null = null;

    factory(
        (v: T) => {
            value = { value: v };
        }, 
        () => {
            completed = true;
        },
    );

    while (!completed) {
        if (value != null) {
            yield (value as { value: T }).value;
            value = null;
        }
        value = null;
        await new Promise(resolve => setImmediate(resolve));
    }
}

so now it can be used like this

yield { state: 'syncing', progress: 0 };

yield* createGenerator<Progress>((next, complete) => {
    axios.post(uri.serialize(parsedURI), body, {
        headers: { session_id: sessionId },
        onUploadProgress: (progress) => {
            next({ state: 'syncing', progress: progress.loaded / progress.total });
        },
    }).then(() => complete());
});

yield { state: 'syncing', progress: 1 };