当前位置：首页 > article >正文

异步处理之async/await使用技巧分享

article 2024/11/16 2:16:06

前言

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