Umgang mit asynchronen Vorgängen

Umgang mit asynchronen Vorgängen

In TypeScript haben wir mehrere Möglichkeiten, asynchrone Vorgänge zu verarbeiten: Rückrufe, Versprechen und asynchron/warten. Durch die asynchrone Programmierung können wir Vorgänge verwalten, die Zeit in Anspruch nehmen können, z. B. das Abrufen von Daten von einer API, ohne die Ausführung anderen Codes zu blockieren.

Rückrufe

Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben und nach Abschluss einer Aufgabe ausgeführt wird. Während Rückrufe für einfache Aufgaben funktionieren, können sie schnell unleserlich werden, wenn Vorgänge verkettet werden müssen.

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);
  }
});

Versprechen

Versprechen bieten einen saubereren Ansatz als Rückrufe, da sie es uns ermöglichen, asynchrone Vorgänge mithilfe der Methoden .then() und .catch() linearer abzuwickeln. Sie lassen sich leichter verketten, können aber bei komplexen Vorgängen dennoch unübersichtlich werden.

const createPromise = (id: number): Promise<object> => {
  return new Promise<object>((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));

Asynchron/Warten

Async/await bietet eine besser lesbare und verwaltbare Möglichkeit, asynchronen Code im Vergleich zu Versprechen und Rückrufen zu verarbeiten. Damit können wir asynchronen Code so schreiben, als wäre er synchron, indem wir das Schlüsselwort async verwenden, um Funktionen als asynchron zu markieren und darauf warten, die Codeausführung anzuhalten, bis das Versprechen aufgelöst wird. Dieser Ansatz bietet eine bessere Lesbarkeit und ist einfacher zu debuggen.

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const getTodo = async (): Promise<Todo> => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
};

console.log(getTodo());

Warum Async/Await verwenden?

• Verbesserte Lesbarkeit: Async/await ist besser lesbar und einfacher zu befolgen, insbesondere bei komplexem Code mit mehreren asynchronen Aufrufen.
• Fehlerbehandlung: Ermöglicht eine einfachere Fehlerbehandlung mit Try/Catch-Blöcken anstelle mehrerer .catch()-Methoden.

---

Vielen Dank

Das obige ist der detaillierte Inhalt vonUmgang mit asynchronen Vorgängen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!