代码片段分享：7个实用的async/await代码片段，轻松掌握JavaScript异步操作

在JavaScript的世界里，异步编程经历了从回调函数到Promises，再到如今广泛使用的async/await语法的演变。这种进化不仅让异步代码变得更简洁，还让它的逻辑结构更接近同步代码，大大提升了代码的可读性和可维护性。

对于刚入门的同学来说，掌握async/await的基本用法是迈出的第一步。但想要真正发挥它的威力，我们还需要深入了解一些高级用法，这样才能更好地控制复杂的异步流程，实现更强大的功能。

这篇文章就带你一步步深入，掌握那些你可能还不知道的async/await进阶技巧。

1、高阶函数处理异步操作

想象一下，你在超市购物，有一个购物清单，但你想只买其中的某些特定物品，比如说只买水果。这时，你可能会逐一查看每个物品，判断它是否是水果。类似地，在编程中，我们也可能需要从一个数组中挑选符合某个条件的元素，而这些判断过程可能是异步的，这就需要用到高级技巧——结合async/await与数组的高阶函数。

在实际开发中，你可能会遇到这样的需求：你需要对一个数组中的每个元素进行异步操作，然后根据操作结果对元素进行筛选。比如，假设我们有一组数字，我们想筛选出其中的奇数，但判断一个数是否为奇数的操作需要一点时间（比如需要等待某个远程服务的返回结果）。

示例代码

// 异步筛选函数
async function asyncFilter(array, predicate) {
    const results = await Promise.all(array.map(predicate));
    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(console.log); // 输出: [1, 3, 5]

在这段代码中，我们定义了一个asyncFilter函数，它接收一个数组和一个异步判断函数（predicate），然后通过Promise.all并行处理数组中的每个元素，等待所有异步操作完成后，再使用filter函数根据判断结果筛选出符合条件的元素。

在实际开发中，这种技巧可以应用在各种需要异步处理和筛选的场景中，比如从一组用户数据中筛选出符合特定条件的用户，或是从一堆文件中挑选出符合某些标准的文件。通过这种方式，你可以在异步操作中保持代码的简洁和优雅，避免陷入回调地狱，让你的异步处理变得像购物一样轻松愉快。

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);
}

在这段代码中，我们实现了一个asyncPool函数，它通过限制并发数（poolLimit）来控制同时运行的异步任务数量。asyncPool会遍历任务数组，按顺序启动任务，并且在并发任务达到限制时，等待最早完成的任务腾出位置，才开始下一个任务。

在实际应用中，这种技巧特别适用于需要批量处理且需要限制并发数的场景，比如批量文件上传、大量API请求等。通过合理的并发控制，你可以让你的应用在高效运行的同时，避免因为资源耗尽而出现的意外问题。

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) {
    // 节点的异步处理逻辑
}

代码解析

在这段代码中，我们定义了一个asyncRecursiveSearch函数，它会递归地遍历传入的节点数组nodes，并对每个节点执行异步操作asyncProcess。如果当前节点有子节点（children），那么函数会继续递归处理这些子节点，直到遍历完整棵树。

你可以把这个过程想象成一支探险队在探索一片森林。每到一个新的地点（节点），探险队都会停下来执行一些任务（异步操作），例如测量环境、记录数据等。任务完成后，如果发现还有未探索的路径（子节点），探险队就会深入这些路径，继续他们的探险旅程，直到把整片森林探查完毕。

这种结合了递归和async/await的方式，特别适用于需要逐层深入处理的树形结构数据，确保每个节点都被异步处理且不会阻塞整个遍历过程。在实际应用中，你可能会用到这种技术来处理复杂的文件系统扫描、网络请求响应的递归解析、或者其他需要分层处理的数据结构。

4、工厂模式助力异步初始化

在JavaScript中，构造函数是用来初始化类实例的，但它本质上是同步的，这就意味着你无法直接在构造函数中执行异步操作。不过，别担心，我们可以通过“工厂模式”巧妙地绕过这个限制，实现类实例的异步初始化。这种方法就像是定制产品的工厂，先处理好所有原材料（异步数据），再制造出符合你需求的产品（类实例）。

设想一个场景，你需要创建一个类实例，而这个实例需要依赖一些异步获取的数据。例如，你有一个Example类，这个类的实例需要从远程服务器获取一些数据来初始化。由于构造函数无法是异步的，我们可以通过静态方法和工厂模式来实现这一目标。

示例代码

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

    // 静态的异步创建方法
    static async create() {
        const data = await fetchData(); // 异步获取数据
        return new Example(data);
    }
}

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

代码解析

在这段代码中，我们定义了一个Example类，它的构造函数接受一个data参数，用于初始化实例属性。由于构造函数不能是异步的，我们通过定义一个静态方法create来实现异步初始化。在create方法中，我们首先通过fetchData函数异步获取数据，然后将这些数据传入构造函数，最终返回一个新的Example实例。

这种工厂模式非常适合需要异步数据初始化的类，比如你在创建用户对象时需要先从数据库获取用户信息，或者在创建文件对象时需要先从服务器下载文件内容。通过这种模式，你不仅可以保持代码的简洁和可读性，还能确保异步操作的顺序和正确性。

5、链式调用

在编程中，链式调用就像是在搭积木，一层层地构建出你想要的结果。而在异步编程中，async/await让这种搭积木的过程变得更加直观和顺畅。通过await，你可以让每一步的异步操作按顺序执行，最终构建出你想要的结果。

假设你正在开发一个API客户端，这个客户端需要依次调用多个接口，并将每次调用的结果保存下来供后续使用。传统上，你可能会使用回调函数或then链来实现这些操作，但这会让代码变得冗长且不易阅读。借助async/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());

代码解析

在这个例子中，我们创建了一个ApiClient类，其中包含两个异步方法firstMethod和secondMethod。每个方法都会发起一个异步请求，等待请求完成后，将结果保存到实例的value属性中，然后返回当前实例（this），以便进行后续的链式调用。

在使用时，我们首先创建一个ApiClient实例，然后通过链式调用依次执行firstMethod和secondMethod，最终得到最后一个异步操作的结果。整个过程一气呵成，就像搭积木一样简单明了。

这种使用await实现链式调用的方式，特别适合需要依次执行多个异步操作，并且每一步都依赖于前一步结果的场景。通过这种方式，你的代码不仅更加直观，也更容易维护和理解。最终，这种编程风格就像搭积木一样，把复杂的异步操作层层叠加，构建出一个稳定而清晰的解决方案。

6、事件循环

在JavaScript中，事件循环就像城市的交通系统，管理着任务的流动和执行顺序。而async/await则像是一位交通指挥官，能够精确控制哪些任务先执行，哪些任务需要稍后再进行。这种组合不仅让你的代码更具可读性，还让你能够更好地掌控异步操作，尤其是在处理DOM事件或计时器时。

在实际开发中，你可能会遇到需要在特定时间后执行某些操作的情况，比如处理用户点击事件后设置一个延迟操作。这时，传统的setTimeout虽然能实现延时功能，但配合async/await，你可以用一种更优雅、更直观的方式来控制这些异步任务的执行顺序。

示例代码

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

// 使用示例
asyncSetTimeout(() => console.log('Timeout after 2 seconds'), 2000);

代码解析

在这个例子中，我们创建了一个asyncSetTimeout函数，它接收一个回调函数fn和一个延迟时间ms。这个函数内部使用了Promise来包装setTimeout，并配合await来实现异步等待。在指定的时间过去后，fn回调函数被调用，执行你所定义的操作。

在实际应用中，这种方法非常适合处理那些需要延时的异步操作，或者在处理一些需要和事件循环结合的场景，比如在用户操作后延时执行某个任务，或者是配合DOM事件来实现更加流畅的用户体验。

7、简化错误处理

在编程中，错误处理就像给你的代码加上安全带，确保即使发生意外，也能安全着陆。传统的异步编程中，错误处理往往显得复杂、凌乱。而使用async/await，你可以将错误处理逻辑自然地融入代码流程中，就像在同步代码中处理错误一样简洁明了。

在实际开发中，任何异步操作都有可能失败，例如网络请求超时、文件读写错误等。为了确保应用的稳定性，我们必须处理这些可能的错误。而通过async/await，你不仅可以直观地编写异步代码，还能像处理同步代码那样，轻松地集成错误处理逻辑。

示例代码

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

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

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

代码解析

在这段代码中，我们定义了一个asyncOperation函数，它执行一个可能会失败的异步操作mightFailOperation。通过使用try...catch，我们可以在操作失败时捕获错误，并调用handleAsyncError函数进行处理。这种方式让错误处理逻辑紧紧跟随着代码的执行路径，直观而自然。

通过这种方式，async/await不仅让你的异步代码更加简洁流畅，还让错误处理变得更加直观和有效。与传统的回调函数或Promise链相比，这种方法减少了代码的复杂度，并且更易于理解和维护。

结束

通过掌握这七个async/await的高级用法，你可以在JavaScript中更加直观和声明式地处理复杂的异步逻辑，同时保持代码的简洁和可维护性。在实际项目中不断运用和精进这些技巧，不仅能有效提升你的编程效率，还能显著提高项目的整体质量。

如果你对这些内容感兴趣，或者在实际操作中遇到什么问题，欢迎在下方留言讨论！「前端达人」将持续为大家带来更多实用的编程技巧，记得关注并分享给更多的前端小伙伴哦！一起成长，共同进步！🚀