异步等待练习题 - Javascript

在Javascript中，异步等待（Async/Await）是一种用于处理异步操作的高级技术。它可以让我们在不使用回调函数和Promise对象的情况下，更加优雅地处理异步操作。在本篇介绍中，我们将以练习题的形式来学习并掌握Javascript中的异步等待。

练习题1 - 简单的异步操作

假设我们要使用异步等待来编写一个简单的函数，其中执行了一个异步操作。以下是函数的基本代码：

async function simpleAsyncFunction() {
  // Perform an asynchronous operation
  // and wait for it to complete.
  const result = await performAsyncOperation();
  // Return the result.
  return result;
}

请你完成以下任务：

1. 将 performAsyncOperation() 函数替换为任意具有异步特性的操作，例如一个通过Fetch API获取数据的操作。
2. 编写一个简单的测试，用于验证该函数正确返回了异步操作的结果。

解答

以下是练习题1的解答：

async function simpleAsyncFunction() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}

test('simpleAsyncFunction returns correct value', async () => {
  const result = await simpleAsyncFunction();
  expect(result).toEqual({
    userId: 1,
    id: 1,
    title: 'delectus aut autem',
    completed: false
  });
});

练习题2 - 处理多个异步操作

现在，我们假设我们需要从两个不同的端点获取数据，并在它们都成功获取后将它们进行组合。以下是我们的函数基本代码：

async function combineAsyncOperations() {
  // Perform two asynchronous operations.
  const result1 = await performAsyncOperation1();
  const result2 = await performAsyncOperation2();
  // Combine the results.
  const combinedResult = combineData(result1, result2);
  // Return the combined result.
  return combinedResult;
}

请你完成以下任务：

1. 将 performAsyncOperation1() 和 performAsyncOperation2() 函数替换为任意具有异步特性的操作，例如两个通过Fetch API获取数据的操作。
2. 编写一个简单的测试，用于验证该函数正确返回了两个异步操作的组合结果。

解答

以下是练习题2的解答：

async function combineAsyncOperations() {
  const response1 = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const todo1 = await response1.json();
  const response2 = await fetch('https://jsonplaceholder.typicode.com/todos/2');
  const todo2 = await response2.json();
  return [todo1, todo2];
}

test('combineAsyncOperations returns correct value', async () => {
  const result = await combineAsyncOperations();
  expect(result).toEqual([
    {
      userId: 1,
      id: 1,
      title: 'delectus aut autem',
      completed: false
    },
    {
      userId: 1,
      id: 2,
      title: 'quis ut nam facilis et officia qui',
      completed: false
    }
  ]);
});

练习题3 - 处理多个异步操作，并行执行

在练习题2中，我们依然是按照顺序依次执行两个异步操作。如果我们希望能够并行执行这两个异步操作，该如何编写代码呢？以下是我们的函数基本代码：

async function combineAsyncOperationsParallel() {
  // Perform two asynchronous operations in parallel.
  const result1 = await performAsyncOperation1();
  const result2 = await performAsyncOperation2();
  // Combine the results.
  const combinedResult = combineData(result1, result2);
  // Return the combined result.
  return combinedResult;
}

请你完成以下任务：

1. 将 performAsyncOperation1() 和 performAsyncOperation2() 函数替换为任意具有异步特性的操作，例如两个通过Fetch API获取数据的操作。
2. 编写一个简单的测试，用于验证该函数正确返回了两个异步操作的组合结果，并且这两个异步操作是并行执行的。

解答

以下是练习题3的解答：

async function combineAsyncOperationsParallel() {
  const promise1 = fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
  const promise2 = fetch('https://jsonplaceholder.typicode.com/todos/2').then(res => res.json());
  const [todo1, todo2] = await Promise.all([promise1, promise2]);
  return [todo1, todo2];
}

test('combineAsyncOperationsParallel returns correct value', async () => {
  const result = await combineAsyncOperationsParallel();
  expect(result).toEqual([
    {
      userId: 1,
      id: 1,
      title: 'delectus aut autem',
      completed: false
    },
    {
      userId: 1,
      id: 2,
      title: 'quis ut nam facilis et officia qui',
      completed: false
    }
  ]);
});

总结

在本次练习题中，我们掌握了Javascript中异步等待的基本用法，并通过实际编写异步等待的代码和测试，学习了如何使用异步等待进行异步操作和处理异步操作的结果。异步等待是Javascript中一个非常有用的工具，能够大大提升Javascript代码的可读性和可维护性，特别是在处理异步操作的时候。