我要投稿

JavaScript生成器实战：5个高级异步控制技巧 | 现代前端开发

文章小助手 javascript

2025-07-17 0 454

JavaScript生成器实战：5个高级异步控制技巧

核心价值： JavaScript生成器(Generator)可以暂停和恢复函数执行。本文将展示5个实际开发中的高级应用场景，帮助开发者实现更优雅的异步流程控制。

1. 基础生成器函数

创建简单的数据生成器：

function* idGenerator() {
    let id = 1;
    while (true) {
        yield id++;
    }
}

// 使用
const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

2. 异步流程控制

实现类似async/await的效果：

function asyncTask(value, delay) {
    return new Promise(resolve => {
        setTimeout(() => resolve(value), delay);
    });
}

function* asyncGenerator() {
    const result1 = yield asyncTask('第一步', 1000);
    console.log(result1);
    
    const result2 = yield asyncTask('第二步', 500);
    console.log(result2);
    
    return '完成';
}

function runGenerator(gen) {
    const iterator = gen();
    
    function handle(result) {
        if (result.done) return result.value;
        return result.value.then(res => {
            return handle(iterator.next(res));
        });
    }
    
    return handle(iterator.next());
}

// 使用
runGenerator(asyncGenerator);

3. 无限滚动加载

实现分页数据生成器：

function* paginationGenerator(url) {
    let page = 1;
    let hasMore = true;
    
    while (hasMore) {
        const data = yield fetch(`${url}?page=${page}`)
            .then(res => res.json());
        
        if (data.length === 0) {
            hasMore = false;
        } else {
            yield data;
            page++;
        }
    }
}

// 使用
const pagination = paginationGenerator('/api/items');
pagination.next().value.then(data => {
    console.log('第一页数据:', data);
    // 加载下一页: pagination.next()
});

4. 状态机实现

用生成器构建状态机：

function* trafficLight() {
    while (true) {
        yield '红灯: 等待';
        yield '绿灯: 通行';
        yield '黄灯: 减速';
    }
}

// 使用
const light = trafficLight();
setInterval(() => {
    console.log(light.next().value);
}, 3000);

技术	回调函数	生成器
代码可读性	低	高
错误处理	复杂	简单
适用场景	简单异步	复杂流程

5. 数据管道处理

构建数据处理管道：

function* pipeline(stages, initialData) {
    let data = initialData;
    
    for (const stage of stages) {
        data = yield stage(data);
    }
    
    return data;
}

// 使用
const stages = [
    data => data.filter(x => x > 0),
    data => data.map(x => x * 2),
    data => data.reduce((sum, x) => sum + x, 0)
];

const data = [-1, 2, 3, -4, 5];
const pipe = pipeline(stages, data);

function runPipe(pipe) {
    let result = pipe.next();
    
    while (!result.done) {
        result = pipe.next(result.value);
    }
    
    console.log('处理结果:', result.value);
}

runPipe(pipe); // 输出: 20

JavaScript生成器为复杂异步流程控制提供了强大的解决方案，特别适合需要精细控制执行顺序的场景。