在处理诸如文件上传等场景时,可能需要限制同时进行的异步操作数量以避免系统资源耗尽。
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();
}
// 示例
#### Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
#### Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/b4ee1921321dddc29bf532ba888c89e9.png)