如何处理异步操作

# Web 开发# JavaScript# 编程# Typescript

如何处理异步操作

在 TypeScript 中，我们有多种处理异步操作的方法：回调、承诺和 async/await。异步编程使我们能够管理可能需要时间的操作（例如从 API 获取数据），而不会阻止其他代码的执行。

回调

回调是作为参数传递给另一个函数的函数，在任务完成后执行。虽然回调适用于简单任务，但当需要链接操作时，它们很快就会变得难以理解。

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const createPromise = (
  id: number,
  callback: (error: Error | null, task: Todo | null) => void
) => {
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("failed to load data");
      }
    })
    .then((data) => {
      callback(null, data);
    })
    .catch((error) => {
      callback(error, null);
    });
};

createPromise(1, (error, task) => {
  if (error) {
    console.error(error);
  } else {
    console.log(task);
  }
});

承诺

Promises 允许我们使用 .then() 和 .catch() 方法以更线性的方式处理异步操作，因此比回调更简洁。它们更容易链接，但在执行复杂操作时仍然会变得混乱。

const createPromise = (id: number): Promise => {
  return new Promise((resolve, reject) => {
    const data: object = fetch(
      `https://jsonplaceholder.typicode.com/todos/${id}`
    ).then((response) => response.json());
    if (data) {
      resolve(data);
    } else {
      reject("failed to load data");
    }
  });
};

createPromise(1)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));
异步/等待
与 Promise 和回调相比，Async/await 提供了一种更易读、更易于管理的异步代码处理方式。它允许我们将异步代码编写得像同步代码一样，使用 async 关键字将函数标记为异步，并使用 await 暂停代码执行，直到 Promise 解析。这种方法提高了可读性，并且更易于调试。
type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const getTodo = async (): Promise => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
};

console.log(getTodo());
为什么要使用 Async/Await？
  • 提高可读性：Async/await 更具可读性且更易于理解，特别是对于具有多个异步调用的复杂代码。
  • 错误处理：它允许使用 try/catch 块进行更简单的错误处理，而不是多个 .catch() 方法。