深入浅出 es2017 中 async/await 用时应该注意的细节

在 ES2017 中，JavaScript 引入了全新的异步编程语法，async/await，使得异步操作更加直观、易懂、灵活。但是，当我们在实际开发中使用 async/await 时，需要注意以下几个细节。

1. async 函数的返回值

async 函数的返回值是一个 promise 对象，因此需要使用 then/catch 来处理返回值。如下所示：

async function getData() {
  const response = await fetch('https://example.com/api/data');
  const data = await response.json();
  return data;
}

getData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

2. 错误处理

async/await 提供了一种更加优雅的错误处理方式，即使用 try/catch 来捕获可能出现的错误并进行处理。如下所示：

async function getData() {
  try {
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

3. 多个异步操作的处理

在多个异步操作中，如果某一个操作出现错误，则后续的异步操作将不会执行。如果要忽略错误，可以使用 Promise.allSettled() 方法来处理。如下所示：

async function getData() {
  const [data1, data2] = await Promise.allSettled([
    fetch('https://example.com/api/data1').then((response) => response.json()),
    fetch('https://example.com/api/data2').then((response) => response.json()),
  ]);
  if (data1.status === 'fulfilled' && data2.status === 'fulfilled') {
    console.log(data1.value, data2.value);
  } else {
    console.error(data1.reason, data2.reason);
  }
}

4. 并发限制

在实际应用中，我们可能需要限制异步操作的并发数量。可以使用类似于 Promise.race() 的方法，通过递归的方式控制异步操作的数量。如下所示：

async function handleTask(tasks, concurrency) {
  const result = [];
  const executing = [];
  let index = 0;
  while (executing.length < concurrency && index < tasks.length) {
    const task = tasks[index++];
    const p = task();
    executing.push(p);
    p.then((value) => {
      result.push(value);
      executing.splice(executing.indexOf(p), 1);
    }).catch((error) => {
      executing.splice(executing.indexOf(p), 1);
    });
  }
  await Promise.all(executing);
  return result;
}

const tasks = [task1, task2, task3]; // 模拟异步任务
handleTask(tasks, 2).then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

以上是我个人在实践中总结的一些异步操作中需要注意的细节，希望对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65927e61eb4cecbf2d745cf6