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

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

1. 基础用法

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

async function fetchData() {
let data = await fetch('url');

    data = await data.json();
return data;

}

2. 错误处理

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

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操作。

async function fetchMultipleUrls(urls) {
const promises = urls.map(url => fetch(url).then(r => r.json()));
return await Promise.all(promises);

}

4. 条件异步

根据条件执行await。

async function fetchData(condition) {
if (condition) {
return await fetch('url');

    }
return 'No fetch needed';

}

5. 循环中的await

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

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循环。

async function processStream(stream) {
for await (const chunk of stream) {
console.log(chunk);

    }

}

7. await之后立即解构

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

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

}

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

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

async function fetchData(url = 'default-url') {
const response = await fetch(url);
return response.json();

}

9. await在类的方法中

在类的方法中使用async/await。

class DataFetcher {
async getData() {
const data = await fetch('url').then(r => r.json());
return data;

    }

}

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

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

(async () => {
const data = await fetch('url').then(r => r.json());
console.log(data);

})();

11. 使用async/await进行延时

利用async/await实现延时。

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。

document.getElementById('button').addEventListener('click', async (event) => {

    event.preventDefault();
const data = await fetch('url').then(r => r.json());
console.log(data);

});

13. 以顺序方式处理数组

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

async function processArray(array) {
for (const item of array) {
await delayedLog(item);

    }
console.log('Done!');

}

14. 组合async/await与destructuring以及spread运算符

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

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

}

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

将async方法作为对象的属性。

const dataRetriever = {
async fetchData() {
return await fetch('url').then(r => r.json());

    }

};

16. 异步生成器函数

使用async生成器函数结合yield。

async function* asyncGenerator(array) {
for (const item of array) {
yield await processItem(item);

    }

}

17. 使用顶级await

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

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

18. async/await与IIFE结合

将async函数与立即执行函数表达式（IIFE）结合。

(async function() {
const data = await fetch('url').then(r => r.json());
console.log(data);

})();

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

优化递归函数。

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。

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

    }

}