async/await 工具函数的使用

 

async/await起到什么作用

async/await从字面意思上很好理解，async是异步的意思，await有等待的意思，而两者的用法上也是如此。async用于申明一个function是异步的，而await 用于等待一个异步方法执行完成。

Promise.allSettled()静态方法将一个 Promise 可迭代对象作为输入，并返回一个单独的 Promise。当所有输入的 Promise 都已敲定时（包括传入空的可迭代对象时），返回的 Promise 将被兑现，并带有描述每个 Promise 结果的对象数组。

Promise.all() 静态方法接受一个 Promise 可迭代对象作为输入，并返回一个 Promise。当所有输入的 Promise 都被兑现时，返回的 Promise 也将被兑现（即使传入的是一个空的可迭代对象），并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝，则返回的 Promise 将被拒绝，并带有第一个被拒绝的原因。

一、异步获取数据

async function fetchData() {
  try {
    const res = await axios.get('https://api.example.com/data');
    if (res.code != 200) {
      throw new Error('response error');
    }
    return res;
  } catch (error) {
    console.log('Error:', error);
    throw error;
  }
}

使用await关键字等待异步请求返回的数据。这样，我们可以在代码中以同步的方式处理数据，而无需使用回调函数。

二、异步执行多个任务

async function performTasks() {
  const [result1, result2] = await Promise.allSettled([doTask1(), doTask2()]);
  console.log('Tasks completed:', result1, result2);
}

Promise.allSettled接收一个包含多个任务的数组，并返回一个新的Promise，直到所有任务都完成才会解析。

三、顺序执行异步任务

async function performTasks() {
  const result1 = await doTask1();
  const result2 = await doTask2();
  console.log('All tasks success');
}

按照顺序执行两个异步任务，并在两个任务都完成后打印一条消息。

四、异步循环

async function processItems(items) {
  await Promise.allSettled(items.map(item => taskItem(item)));
  console.log('All items success');
}

使用await在循环中处理每个项目。在处理完所有项目后，将打印一条消息。

五、延迟执行

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedTask() {
  console.log('Task started');
  await delay(2000);
  console.log('Task end');
}

delay函数返回一个Promise，经过指定的延迟时间后解析。在delayedTask函数中，我们使用await让任务在经过2秒的延迟后才继续执行。