百度 seo 工具_用手机怎么制作app软件_竞价交易_苏州百度 seo

前言

async/await是非常强大的语法糖，是处理异步问题的一种简洁、高效的方式。虽然它并非“最终解决方案”，但与Promise配合使用，确实能极大地简化异步编程的复杂性。

从字面上理解，async 表示一个函数是异步的，await 则用来等待一个异步操作完成。二者结合使用，使得代码看起来更加同步化，从而提高了可读性和维护性。

MDN文档

MDN: async/await

优点

提高代码可读性
使用async/await，代码写起来类似于同步代码，从而避免了then链式调用中常见的回调地狱。

async function() {const data1 = await getApiData(1);const data2 = await getApiData(2);const data3 = await getApiData(3);
}

支持条件判断与流程控制
可以直接在if条件语句中使用await，使得复杂逻辑更加简洁。
```
if(await getApiData(true)){// ...
}
```

提高复杂流程的清晰度
使用async/await重构复杂的Promise链，代码会变得更加清晰易懂。

原始Promise写法：

let arr = [];new Promise((resolve) => {if (arr.length) {resolve();} else {getApiData().then((res) => {if (res.data.length) {arr = res.data;resolve();} else {console.log('数据为空')}})}
}).then(() => {arr.forEach(() => {});
})

重构为async/await写法：

let arr = [];async function fn() {if (!arr.length) {const res = await getApiData();if (res.data.length) {arr = res.data;} else {console.log('数据为空')return;}}arr.forEach(() => {})
}
fn();

缺点

错误处理麻烦
异常需要使用try...catch进行捕获，如果请求接口出现错误，错误信息就需要在catch中处理。如果错误信息没有明确的区分，可能会影响代码的可维护性。
不能并行执行多个异步操作
await会阻塞后续代码的执行，直到当前Promise完成。如果需要并行执行多个异步操作，需要额外的处理。
全局错误捕获问题
异步函数中的全局错误需要通过window.onerror来捕获，但window.onerror会捕获一些不相关的错误，增加了系统开销。unhandledrejection事件可以用于捕获Promise中的未处理异常。
局部错误捕获问题
try...catch语句内部的变量，无法被外部catch捕获，导致错误捕获范围有限。
不支持部分Promise方法
async/await不支持像Promise.race()、Promise.all()等原生Promise方法，因此如果你需要这些方法，建议直接使用Promise。
调试问题
在调试过程中，异步代码的行为可能不如预期，尤其在嵌套较深的async/await时，可能需要多次调试才能找到问题所在。

使用技巧

技巧1: 全局作用域下使用`async/await`

async函数只能在异步环境中调用，在全局作用域下不能直接使用async。你可以使用自执行匿名函数（IIFE）来解决这个问题：

(async () => {const data = await function();
})();

在React中使用

React的useEffect中不能直接使用async函数，因为它返回的是一个Promise，React期望useEffect返回一个清理函数。正确的做法是将async函数封装在一个内部函数中并执行：

useEffect(() => {async function fetchData() {const response = await MyAPI.getData(someId);// 处理数据}fetchData();
}, [someId]); // 或者[]，如果依赖为空

技巧2: 在类方法中使用`async/await`

你可以在类方法中使用async/await来处理异步操作：

class Animal {async getAnimalInfo() {const res = await fetch('https://api.example.com/');return await res.json();}
}const animal = new Animal();
(async () => {const data = await animal.getAnimalInfo();
})();

技巧3: 使用`Promise.all`来并行处理多个`await`

当你需要并行执行多个异步操作时，可以使用Promise.all()来同时发起多个异步请求：

const func = async () => {// 使用Promise.all来并行处理多个异步请求const [data1, data2] = await Promise.all([getData(1),getData(2)]);
}

技巧4: 串行与并行的结合使用

你可以根据需求选择是否让异步操作串行或并行执行。

const func = async () => {// 串行const data1 = await getApiData(1);const data2 = await getApiData(2);// 并行const data3Promise = getApiData(3);const data4Promise = getApiData(4);const data5 = await data3Promise;const data6 = await data4Promise;
}

技巧5: 在循环中使用`await`

forEach中无法直接使用async/await，因此需要使用for...of循环或map与Promise.all来处理。

串行：

const func = async () => {const names = ['a', 'b'];for (const name of names) {const data = await getApiData(name);}
}

并行：

const func = async () => {const names = ['a', 'b'];const promises = names.map(x => getApiData(x));for (const name of promises) {const data = await name; // 等待Promise执行完成}
}

技巧6：使用`async/await`优化递归

递归函数是编程中的一种常用技术，async/await可以很容易地使递归函数进行异步操作。

/ 异步递归函数
async function func(nodes) {for (const node of nodes) {await asyncProcess(node);if (node.children) {await func(node.children);}}
}// 示例
async function asyncProcess(node) {// 对节点进行异步处理逻辑
}

技巧7：结合`async/await`和事件循环

使用async/await可以更好地控制事件循环，像处理DOM事件或定时器等场合。

// 异步定时器函数
async function funcTimeout(fn, ms) {await new Promise(resolve => setTimeout(resolve, ms));fn();
}// 示例
funcTimeout(() => console.log('Timeout after 2 seconds'), 2000);