领跑异步编程，7个Js async/await高级秘笈！

2023-08-28 03:01:24

探索 async/await 的高级用法，释放 JavaScript 异步编程的强大力量

简介

JavaScript 的 async/await 是强大的异步编程工具，备受开发者喜爱。掌握了它的基础用法后，让我们深入探索它的 7 个高级用法，解锁更复杂的异步流程控制，提高代码简洁性和效率。

1. 并行处理异步任务

async/await 支持并行处理异步任务。使用 Promise.all() 或 async/await 的并行特性，同时处理多个异步任务，极大提高性能，尤其是在处理大量异步任务时。

代码示例:

// Promise.all()
const results = await Promise.all([
  fetch('https://example.com/1'),
  fetch('https://example.com/2'),
  fetch('https://example.com/3'),
]);

// async/await
const results = await Promise.allSettled([
  fetch('https://example.com/1'),
  fetch('https://example.com/2'),
  fetch('https://example.com/3'),
]);

2. 使用 async/await 处理错误

async/await 简化了异步任务中错误的处理。使用 try-catch 块捕获错误，并根据需要采取相应措施。

代码示例:

try {
  const result = await fetch('https://example.com/1');
  const data = await result.json();
} catch (error) {
  // Handle the error
}

3. 创建自定义等待函数

async/await 可用于创建自定义等待函数，暂停代码执行直至某个条件满足。这对于等待数据加载或操作完成很有用。

代码示例:

const delay = async (ms) => {
  await new Promise((resolve) => setTimeout(resolve, ms));
};

4. 创建生成器函数

async/await 与生成器函数结合，实现迭代和协程。生成器函数产生一个可遍历的值序列，async/await 简化了其异步实现。

代码示例:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const sequence = generateSequence(1, 10);

for await (const value of sequence) {
  console.log(value);
}

5. 创建异步流

async/await 可用于创建异步流，处理连续的数据流。它提供了一种简便的方法来管理和迭代数据流。

代码示例:

async function* generateAsyncStream() {
  for (let i = 1; i <= 10; i++) {
    await delay(1000);
    yield i;
  }
}

const asyncStream = generateAsyncStream();

asyncStream.forEach((value) => {
  console.log(value);
});

6. 创建异步迭代器

async/await 还可以创建异步迭代器，用于遍历数据流。它与生成器函数类似，但更强调遍历过程。

代码示例:

async function* generateAsyncIterator() {
  for (let i = 1; i <= 10; i++) {
    await delay(1000);
    yield i;
  }
}

const asyncIterator = generateAsyncIterator();

while (true) {
  const { value, done } = await asyncIterator.next();
  if (done) {
    break;
  }
  console.log(value);
}

7. 创建异步任务队列

async/await 可用于创建异步任务队列，管理和执行异步任务。它提供了一种简便的方法来处理并发异步任务。

代码示例:

class AsyncTaskQueue {
  constructor() {
    this.queue = [];
    this.running = false;
  }

  add(task) {
    this.queue.push(task);
    this.run();
  }

  async run() {
    if (this.running) {
      return;
    }

    this.running = true;

    while (this.queue.length > 0) {
      const task = this.queue.shift();
      await task();
    }

    this.running = false;
  }
}

const taskQueue = new AsyncTaskQueue();

taskQueue.add(() => {
  console.log('Task 1');
});

taskQueue.add(() => {
  console.log('Task 2');
});

taskQueue.add(() => {
  console.log('Task 3');
});