7个Js async await高级用法

}

// 示例
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(console.log); // 输出: [1, 3, 5]


### 2. 控制并发数


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



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

for (const item of array) {
    const p = Promise.resolve().then(() => iteratorFn(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);
}


### 3. 使用`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) {
// 对节点进行异步处理逻辑
}


### 4. 异步初始化类实例


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



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

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

}

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


### 5. 在`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());


### 6. 结合`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);


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值