20个你不得不知道的Js async/await用法

20个你不得不知道的Js async/await用法

JavaScript的asyncawait关键词是现代JavaScript异步编程的核心。它们让异步代码看起来和同步代码几乎一样,使得异步编程变得更加直观和易于管理。本文介绍20个关于async/await的实用技巧,将大大提升编程效率和代码的清晰度。

1. 基础用法

async函数返回一个Promise,而await关键词可以暂停async函数的执行,等待Promise解决。

javascript 复制代码
async function fetchData() {
    let data = await fetch('url');
    data = await data.json();
    return data;
}

2. 错误处理

使用try...catch结构处理async/await中的错误。

javascript 复制代码
async function fetchData() {
    try {
        let response = await fetch('url');
        response = await response.json();
        return response;
    } catch (error) {
        console.error('Fetching data error:', error);
    }
}

3. 并行执行

Promise.all()可以用来并行执行多个await操作。

javascript 复制代码
async function fetchMultipleUrls(urls) {
    const promises = urls.map(url => fetch(url).then(r => r.json()));
    return await Promise.all(promises);
}

4. 条件异步

根据条件执行await

javascript 复制代码
async function fetchData(condition) {
    if (condition) {
        return await fetch('url');
    }
    return 'No fetch needed';
}

5. 循环中的await

在循环中使用await时,每次迭代都会等待。

javascript 复制代码
async function sequentialStart(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        console.log(await response.json());
    }
}

6. 异步迭代器

对于异步迭代器(例如Node.js中的Streams),可以使用for-await-of循环。

javascript 复制代码
async function processStream(stream) {
    for await (const chunk of stream) {
        console.log(chunk);
    }
}

7. await之后立即解构

直接在await表达式后使用解构。

javascript 复制代码
async function getUser() {
    const { data: user } = await fetch('user-url').then(r => r.json());
    return user;
}

8. 使用默认参数避免无效的await

如果await可能是不必要的,可以使用默认参数避免等待。

javascript 复制代码
async function fetchData(url = 'default-url') {
    const response = await fetch(url);
    return response.json();
}

9. await在类的方法中

在类的方法中使用async/await

javascript 复制代码
class DataFetcher {
    async getData() {
        const data = await fetch('url').then(r => r.json());
        return data;
    }
}

10. 立刻执行的async箭头函数

可以立即执行的async箭头函数。

javascript 复制代码
(async () => {
    const data = await fetch('url').then(r => r.json());
    console.log(data);
})();

11. 使用async/await进行延时

利用async/await实现延时。

javascript 复制代码
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedLog(item) {
    await delay(1000);
    console.log(item);
}

12. 使用async/await处理事件监听器

在事件处理函数中使用async/await

javascript 复制代码
document.getElementById('button').addEventListener('click', async (event) => {
    event.preventDefault();
    const data = await fetch('url').then(r => r.json());
    console.log(data);
});

13. 以顺序方式处理数组

使用async/await以确定的顺序处理数组。

javascript 复制代码
async function processArray(array) {
    for (const item of array) {
        await delayedLog(item);
    }
    console.log('Done!');
}

14. 组合async/awaitdestructuring以及spread运算符

结合使用async/await,解构和展开操作符。

javascript 复制代码
async function getConfig() {
    const { data, ...rest } = await fetch('config-url').then(r => r.json());
    return { config: data, ...rest };
}

15. 在对象方法中使用async/await

async方法作为对象的属性。

javascript 复制代码
const dataRetriever = {
    async fetchData() {
        return await fetch('url').then(r => r.json());
    }
};

16. 异步生成器函数

使用async生成器函数结合yield

javascript 复制代码
async function* asyncGenerator(array) {
    for (const item of array) {
        yield await processItem(item);
    }
}

17. 使用顶级await

在模块顶层使用await(需要特定的JavaScript环境支持)。

javascript 复制代码
// ECMAScript 2020引入顶级await特性, 部署时注意兼容性
const config = await fetch('config-url').then(r => r.json());

18. async/await与IIFE结合

async函数与立即执行函数表达式(IIFE)结合。

javascript 复制代码
(async function() {
    const data = await fetch('url').then(r => r.json());
    console.log(data);
})();

19. 使用async/await优化递归调用

优化递归函数。

javascript 复制代码
async function asyncRecursiveFunction(items) {
    if (items.length === 0) return 'done';
    const currentItem = items.shift();
    await delay(1000);
    console.log(currentItem);
    return asyncRecursiveFunction(items);
}

20. 在switch语句中使用await

switch语句的每个case中使用await

javascript 复制代码
async function fetchDataBasedOnType(type) {
    switch (type) {
        case 'user':
            return await fetch('user-url').then(r => r.json());
        case 'post':
            return await fetch('post-url').then(r => r.json());
        default:
            throw new Error('Unknown type');
    }
}
相关推荐
雪碧聊技术4 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue2 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷2 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
凌览2 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣2 小时前
JS用法:Map,Set和异步函数
前端·javascript