async/await高级用法

async/await与高阶函数

当需要对数组中的元素执行异步操作时，可结合async/await与数组的高阶函数（如map、filter等）。

// 异步过滤函数
async function asyncFilter(array, fn) {
    const results = await Promise.all(array.map(fn));
    return array.filter((_value, index) => results[index]);
}

async function isOddNumber(n) {
    await delay(100); // 模拟异步操作
    return n % 2 !== 0;
}

async function filterOddNumbers(numbers) {
    return asyncFilter(numbers, isOddNumber);
}

filterOddNumbers([1, 2, 3, 4, 5]).then(); // 结果: [1, 3, 5]

控制并发数

在处理文件上传等场景时，可能需要限制同时进行的异步操作数量以避免系统资源耗尽。

async function asyncPool(poolLimit, array, fn) {
    const result = [];
    const executing = [];

    for (const item of array) {
        const p = Promise.resolve().then(() => fn(item, array));
        result.push(p);

        if (poolLimit <= array.length) {
            const e = p.then(() => executing.splice(executing.indexOf(e), 1));
            executing.push(e);
            if (executing.length >= poolLimit) {
                await Promise.race(executing);
            }
        }
    }

    return Promise.all(result);
}

async function uploadFile(file) {
    // 文件上传逻辑
}

async function limitedFileUpload(files) {
    return asyncPool(3, files, uploadFile);
}

使用async/await优化递归

async/await可以很容易地使递归函数进行异步操作。

// 异步递归函数
async function asyncRecursiveSearch(nodes) {
    for (const node of nodes) {
        await asyncProcess(node);
        if (node.children) {
            await asyncRecursiveSearch(node.children);
        }
    }
}

async function asyncProcess(node) {
    // 异步处理逻辑
}

异步初始化类实例

在JavaScript中，类的构造器（constructor）不能是异步的。但可以通过工厂函数模式来实现类实例的异步初始化。

class Example {
    constructor(data) {
        this.data = data;
    }

    static async create() {
        const data = await fetchData(); // 异步获取数据
        return new Example(data);
    }
}

// 使用方式
Example.create().then((exampleInstance) => {
    // 使用异步初始化的类实例
});

在async函数中使用await链式调用

使用await可以直观地按顺序执行链式调用中的异步操作。

class ApiClient {
    constructor() {
        this.value = null;
    }

    async firstMethod() {
        this.value = await fetch('/first-url').then(r => r.json());
        return this;
    }

    async secondMethod() {
        this.value = await fetch('/second-url').then(r => r.json());
        return this;
    }
}

// 使用方式
const client = new ApiClient();
const result = await client.firstMethod().then(c => c.secondMethod());

结合async/await和事件循环

使用async/await可以更好地控制事件循环，像处理DOM事件或定时器等场合。

// 异步定时器函数
async function asyncSetTimeout(fn, ms) {
    await new Promise(resolve => setTimeout(resolve, ms));
    fn();
}

asyncSetTimeout(() => console.log('Timeout after 2 seconds'), 2000);

使用async/await简化错误处理

通过async/await，可以将错误处理的逻辑更自然地集成到同步代码中。

async function asyncOperation() {
    try {
        const result = await mightFailOperation();
        return result;
    } catch (error) {
        handleAsyncError(error);
    }
}

async function mightFailOperation() {
    // 有可能失败的异步操作
}

function handleAsyncError(error) {
    // 错误处理逻辑
}