JavaScript中async/await的高级用法小结

 更新时间:2023年12月13日 10:28:20   作者:慕仲卿  
JavaScript的异步编程已经从回调(Callback)演进到Promise,再到如今广泛使用的async/await语法,本文为大家整理了7个async/await高级用法,希望对大家有所帮助

JavaScript的异步编程已经从回调(Callback)演进到Promise,再到如今广泛使用的async/await语法。后者不仅让异步代码更加简洁,而且更贴近同步代码的逻辑与结构,大大增强了代码的可读性与可维护性。在掌握了基础用法之后,下面将介绍一些高级用法,以便充分利用async/await实现更复杂的异步流程控制。

1. async/await与高阶函数

当需要对数组中的元素执行异步操作时,可结合async/await与数组的高阶函数(如mapfilter等)。

// 异步过滤函数
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]

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

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) {
    // 错误处理逻辑
}

通过以上七个async/await的高级用法,开发者可以在JavaScript中以更加声明式和直观的方式处理复杂的异步逻辑,同时保持代码整洁和可维护性。在实践中不断应用和掌握这些用法,能够有效地提升编程效率和项目的质量。

到此这篇关于JavaScript中async/await的高级用法小结的文章就介绍到这了,更多相关JavaScript async/await内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 用javascript实现检测指定目录是否存在的方法

    用javascript实现检测指定目录是否存在的方法

    今天看到一篇关于onegreen被挂马的代码发现这个函数,它用js就可以检测,制定的目录或指定的文件是否存在,一般用来读chm文件中的图片来检测,目录的存在。高手就是不学好。
    2008-01-01
  • 简体中文转换繁体中文(实现代码)

    简体中文转换繁体中文(实现代码)

    本篇文章主要是对简体中文转换繁体中文的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript中的比较操作符>、<、>=、<=介绍

    JavaScript中的比较操作符>、<、>=、<=介绍

    这篇文章主要介绍了JavaScript中的比较操作符>、<、>=、<=介绍,本文先是讲解了操作符的一些使用规则,然后给出了操作实例,需要的朋友可以参考下
    2014-12-12
  • 基于JS实现的随机数字抽签实例

    基于JS实现的随机数字抽签实例

    本文分享了基于JS实现的随机数字抽签的实例代码。小编认为具很好的参考价值,感兴趣的朋友可以看下
    2016-12-12
  • javascript设置页面背景色及背景图片的方法

    javascript设置页面背景色及背景图片的方法

    这篇文章主要介绍了javascript设置页面背景色及背景图片的方法,涉及JavaScript动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2015-12-12
  • 浅析JavaScript 调试方法和技巧

    浅析JavaScript 调试方法和技巧

    本文给大家浅析javascript调试方法和技巧,涉及到javascript调试方法和技巧方面的知识,本文介绍的非常详细,非常具有参考借鉴介绍,感兴趣的朋友一起看看吧
    2015-10-10
  • js图片闪动特效可以控制间隔时间如几分钟闪动一下

    js图片闪动特效可以控制间隔时间如几分钟闪动一下

    这篇文章主要介绍一个图片闪动特效,可以控制间隔时间如几分钟闪动一下,需要的朋友不要错过
    2014-08-08
  • js+css实现红包雨效果

    js+css实现红包雨效果

    这篇文章主要为大家详细介绍了js+css实现红包雨效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • js实现简易计算器小功能

    js实现简易计算器小功能

    这篇文章主要为大家详细介绍了js实现简易计算器小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS实现随机抽奖小功能

    JS实现随机抽奖小功能

    这篇文章主要为大家详细介绍了JS实现随机抽奖小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论