Asynchrone programmering is een programmeerparadigma dat je in staat stelt om code te schrijven die asynchroon draait. In tegenstelling tot synchrone programmering, die code sequentieel uitvoert, stelt asynchrone programmering code in staat om op de achtergrond te draaien terwijl de rest van het programma doorgaat met uitvoeren. Dit is bijzonder nuttig voor taken die veel tijd kunnen kosten om te voltooien, zoals het ophalen van gegevens van een externe API.

Asynchrone programmering is essentieel voor het creëren van responsieve en efficiënte applicaties in JavaScript. TypeScript, een superset van JavaScript, maakt het nog gemakkelijker om met asynchrone programmering te werken.

Er zijn verschillende benaderingen van asynchrone programmering in TypeScript, waaronder het gebruik van beloftes, async/await en callbacks. We zullen elk van deze benaderingen in detail behandelen, zodat je de beste optie(s) voor jouw gebruiksgeval kunt kiezen.

Inhoudsopgave

  1. Waarom is Asynchrone Programmering Belangrijk?

  2. Hoe TypeScript Asynchrone Programmering Gemakkelijker Maakt

  3. Hoe Promises te Gebruiken in TypeScript

  4. Hoe Async / Await te Gebruiken in TypeScript

  5. Hoe Callbacks te Gebruiken in TypeScript

  6. Conclusie

Waarom is Async Programmeren Belangrijk?

Asynchroon programmeren is cruciaal voor het bouwen van responsieve en efficiënte webapplicaties. Het stelt taken in staat om op de achtergrond te draaien terwijl de rest van het programma doorgaat, waardoor de gebruikersinterface responsief blijft voor invoer. Bovendien kan asynchroon programmeren de algehele prestaties verbeteren door meerdere taken tegelijkertijd uit te voeren.

Er zijn veel voorbeelden uit de praktijk van asynchroon programmeren, zoals het openen van camerabeelden en microfoons van gebruikers en het verwerken van gebruikersinvoerevenementen. Zelfs als je niet vaak asynchrone functies maakt, is het belangrijk om te weten hoe je ze correct kunt gebruiken om ervoor te zorgen dat je applicatie betrouwbaar is en goed presteert.

Hoe TypeScript Asynchroon Programmeren Eenvoudiger Maakt

TypeScript biedt verschillende functies die asynchroon programmeren vereenvoudigen, waaronder typeveiligheid, type-inferentie, type-controle en type-annotaties.

Met typeveiligheid kun je ervoor zorgen dat je code zich gedraagt zoals verwacht, zelfs bij het omgaan met asynchrone functies. Bijvoorbeeld, TypeScript kan fouten gerelateerd aan null- en ongedefinieerde waarden tijdens de compileertijd opsporen, wat je tijd en moeite bespaart bij het debuggen.

De type-inferentie en controle van TypeScript verminderen ook de hoeveelheid boilerplate-code die je moet schrijven, waardoor je code beknopter en gemakkelijker te lezen is.

En de type-annotaties van TypeScript bieden duidelijkheid en documentatie voor je code, wat vooral nuttig is bij het werken met asynchrone functies die complex kunnen zijn om te begrijpen.

Laten we nu duiken in en leren over deze drie belangrijke kenmerken van asynchrone programmering: beloftes, async/await en callbacks.

Hoe beloftes te gebruiken in TypeScript

Beloftes zijn een krachtig hulpmiddel voor het afhandelen van asynchrone operaties in TypeScript. Je kunt bijvoorbeeld een belofte gebruiken om gegevens van een externe API op te halen of om een tijdrovende taak op de achtergrond uit te voeren terwijl je hoofdthread blijft draaien.

Om een belofte te gebruiken, maak je een nieuwe instantie van de Promise klasse en geef je het een functie die de asynchrone operatie uitvoert. Deze functie moet de resolve-methode aanroepen met het resultaat wanneer de operatie slaagt of de reject-methode met een fout als deze mislukt.

Zodra de belofte is gemaakt, kun je callbacks eraan koppelen met behulp van de then methode. Deze callbacks worden geactiveerd wanneer de belofte is vervuld, waarbij de opgeloste waarde als parameter wordt doorgegeven. Als de belofte wordt afgewezen, kun je een foutafhandelaar koppelen met de catch-methode, die wordt aangeroepen met de reden voor de afwijzing.

Het gebruik van beloftes biedt verschillende voordelen ten opzichte van traditionele methoden op basis van callbacks. Bijvoorbeeld, beloftes kunnen helpen “callback hell” te voorkomen, een veelvoorkomend probleem in asynchrone code waarbij geneste callbacks moeilijk leesbaar en beheersbaar worden.

Beloftes maken het ook gemakkelijker om fouten in asynchrone code af te handelen, aangezien je de catch-methode kunt gebruiken om fouten die ergens in de belofteketen optreden te beheren.

Tot slot kunnen beloftes je code vereenvoudigen door een consistente, samenstelbare manier te bieden om asynchrone operaties af te handelen, ongeacht hun onderliggende implementatie.

Hoe maak je een Promise

Promise syntax:

const myPromise = new Promise((resolve, reject) => {
  // Voer een asynchrone operatie uit
  // Als de operatie succesvol is, roep resolve aan met het resultaat
  // Als de operatie mislukt, roep reject aan met een foutobject
});

myPromise
  .then((result) => {
    // Behandel het succesvolle resultaat
  })
  .catch((error) => {
    // Behandel de fout
  });
// Voorbeeld 1 over hoe je een promise maakt

function myAsyncFunction(): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    // Enkele asynchrone operatie
    setTimeout(() => {
      // Succesvolle operatie lost promise opBekijk mijn nieuwste blogpost over het beheersen van asynchrone programmering in TypeScript! Leer hoe je kunt werken met Promises, Async/Await en Callbacks om efficiënte en schaalbare code te schrijven. Maak je klaar om je TypeScript-vaardigheden naar een hoger niveau te tillen!
      const success = true;

      if (success) {
        // Los de promise op met het resultaat van de operatie als de operatie succesvol was
        resolve(
          `The result is success and your operation result is ${operationResult}`
        );
      } else {
        const rejectCode: number = 404;
        const rejectMessage: string = `The result is failed and your operation result is ${rejectCode}`;
        // Wijs de promise af met het resultaat van de operatie als de operatie mislukt is
        reject(new Error(rejectMessage));
      }
    }, 2000);
  });
}

// Gebruik de promise
myAsyncFunction()
  .then((result) => {
    console.log(result); // output: Het resultaat is succesvol en je operatieresultaat is 4
  })
  .catch((error) => {
    console.error(error); // output: Het resultaat is mislukt en je operatieresultaat is 404
  });

In het bovenstaande voorbeeld hebben we een functie genaamd myAsyncFunction() die een promise retourneert. We gebruiken de Promise constructor om de belofte te creëren, die een callback functie accepteert met de argumenten resolve en reject. Als de asynchrone bewerking succesvol is, roepen we de resolve functie aan. Als het mislukt, roepen we de reject functie aan.

Het promise-object dat door de constructor wordt geretourneerd, heeft een then() methode, die success- en failure callbackfuncties accepteert. Als de belofte succesvol wordt opgelost, wordt de success callbackfunctie aangeroepen met het resultaat. Als de belofte wordt afgewezen, wordt de failure callbackfunctie aangeroepen met een foutmelding.

Het promise-object heeft ook een catch() methode die wordt gebruikt om fouten af te handelen die optreden tijdens de promise-keten. De catch() methode accepteert een callbackfunctie, die wordt aangeroepen als er een fout optreedt in de promise-keten.

Nu gaan we verder met hoe we promises in TypeScript kunnen koppelen.

Hoe promises te koppelen

Het koppelen van beloftes stelt je in staat om meerdere asynchrone bewerkingen achtereenvolgens of parallel uit te voeren. Dit is handig wanneer je verschillende asynchrone taken een voor een of tegelijkertijd moet uitvoeren. Bijvoorbeeld, je moet mogelijk gegevens asynchroon ophalen en deze vervolgens asynchroon verwerken.

Laten we een voorbeeld bekijken van hoe we beloftes kunnen koppelen:

// Voorbeeld van hoe het ketenen van promises werkt
// Eerste promise
const promise1 = new Promise((resolve, reject) => {
  const functionOne: string = "This is the first promise function";
  setTimeout(() => {
    resolve(functionOne);
  }, 1000);
});

// Tweede promise
const promise2 = (data: number) => {
  const functionTwo: string = "This is the second second promise  function";
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(` ${data}  '+'  ${functionTwo} `);
    }, 1000);
  });
};

// Kettingen van de eerste en tweede promises samen
promise1
  .then(promise2)
  .then((result) => {
    console.log(result); // output: Dit is de eerste promise functie + Dit is de tweede tweede promise functie
  })
  .catch((error) => {
    console.error(error);
  });

In het bovenstaande voorbeeld hebben we twee promises: promise1 en promise2. promise1 lost op na 1 seconde met de string “Dit is de eerste promise functie.” promise2 neemt een getal als invoer en retourneert een promise die oplost na 1 seconde met een string die het ingevoerde getal en de string “Dit is de tweede promise functie” combineert.

We ketenen de twee promises samen met behulp van de then methode. De output van promise1 wordt doorgegeven als invoer aan promise2. Tenslotte gebruiken we opnieuw de then methode om de output van promise2 naar de console te loggen. Als een van de promise1 of promise2 wordt afgewezen, zal de fout worden opgevangen door de catch methode.

Gefeliciteerd! Je hebt geleerd hoe je promises kunt maken en aan elkaar kunt ketenen in TypeScript. Je kunt nu promises gebruiken om asynchrone bewerkingen uit te voeren in TypeScript. Laten we nu eens kijken hoe Async/Await werkt in TypeScript.

Hoe Async / Await te Gebruiken in TypeScript

Async/await is een syntaxis die is geïntroduceerd in ES2017 om het werken met Promises gemakkelijker te maken. Het stelt je in staat om asynchrone code te schrijven die eruitziet en aanvoelt als synchrone code.

In TypeScript kun je een asynchrone functie definiëren met het async sleutelwoord. Dit vertelt de compiler dat de functie asynchroon is en een Promise zal retourneren.

Laten we nu kijken hoe we async/await in TypeScript gebruiken.

Async / Await Syntaxis:

// Async / Await Syntaxis in TypeScript
async function functionName(): Promise<ReturnType> {
  try {
    const result = await promise;
    // code die moet worden uitgevoerd nadat de belofte is opgelost
    return result;
  } catch (error) {
    // code die moet worden uitgevoerd als de belofte wordt afgewezen
    throw error;
  }
}

In het bovenstaande voorbeeld is functionName een asynchrone functie die een Promise van ReturnType retourneert. Het await sleutelwoord wordt gebruikt om te wachten totdat de belofte is opgelost voordat we naar de volgende regel code gaan.

De try/catch blok wordt gebruikt om eventuele fouten af te handelen die optreden tijdens het uitvoeren van de code binnen de asynchrone functie. Als er een fout optreedt, wordt deze opgevangen door het catch-blok, waar je het op de juiste manier kunt afhandelen.

Gebruik van Pijl Functies met Async / Await

Je kunt ook pijl functies gebruiken met async/await syntaxis in TypeScript:

const functionName = async (): Promise<ReturnType> => {
  try {
    const result = await promise;
    // code die moet worden uitgevoerd nadat de belofte is opgelost
    return result;
  } catch (error) {
    // code die moet worden uitgevoerd als de belofte wordt afgewezen
    throw error;
  }
};

In het bovenstaande voorbeeld wordt functionName gedefinieerd als een pijlfunctie die een Promise van ReturnType retourneert. Het async trefwoord geeft aan dat dit een asynchrone functie is, en het await trefwoord wordt gebruikt om te wachten tot de promise is opgelost voordat er naar de volgende regel code wordt gegaan.

Async / Await met een API-oproep

Laten we nu verder gaan dan de syntaxis en wat gegevens ophalen van een API met behulp van async/await.

interface User {
  id: number;
  name: string;
  email: string;
}

const fetchApi = async (): Promise<void> => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");

    if (!response.ok) {
      throw new Error(
        `Failed to fetch users (HTTP status code: ${response.status})`
      );
    }

    const data: User[] = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
    throw error;
  }
};

fetchApi();

Hier halen we gegevens op van de JSONPlaceholder API, converteren deze naar JSON en loggen ze vervolgens naar de console. Dit is een praktijkvoorbeeld van het gebruik van async/await in TypeScript.

Je zou gebruikersinformatie in de console moeten zien. Deze afbeelding toont de output:

Async/Await met Axios API-oproep

// Voorbeeld 2 van hoe async/await te gebruiken in typescript

const fetchApi = async (): Promise<void> => {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    const data = await response.data;
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchApi();

In het bovenstaande voorbeeld definiëren we de functie fetchApi() met behulp van async/await en de Axios.get()-methode om een HTTP GET-verzoek naar de gespecificeerde URL te doen. We gebruiken await om te wachten op de respons, halen vervolgens de gegevens eruit met behulp van de data-eigenschap van het responsobject. Ten slotte loggen we de gegevens naar de console met console.log(). Eventuele fouten die optreden worden afgevangen en gelogd naar de console met console.error().

Dit kunnen we bereiken met Axios, dus je zou hetzelfde resultaat in de console moeten zien.

Deze afbeelding toont de output bij het gebruik van Axios in de console:

Let op: Voordat je de bovenstaande code probeert, moet je Axios installeren met behulp van npm of yarn.


npm install axios

yarn add axios

Als je niet bekend bent met Axios, kun je hier meer over leren.

Je kunt zien dat we een try en catch blok hebben gebruikt om fouten af te handelen. Het try en catch blok is een methode voor het beheren van fouten in TypeScript. Zorg er dus voor dat je altijd een try en catch blok gebruikt om eventuele fouten af te handelen wanneer je API-aanroepen doet, zoals we net hebben gedaan.

Nu laten we een meer geavanceerd gebruik van het try en catch blok in TypeScript verkennen:

// Voorbeeld 3 over hoe je async / await in typescript gebruikt

interface Recipe {
  id: number;
  name: string;
  ingredients: string[];
  instructions: string[];
  prepTimeMinutes: number;
  cookTimeMinutes: number;
  servings: number;
  difficulty: string;
  cuisine: string;
  caloriesPerServing: number;
  tags: string[];
  userId: number;
  image: string;
  rating: number;
  reviewCount: number;
  mealType: string[];
}

const fetchRecipes = async (): Promise<Recipe[] | string> => {
  const api = "https://dummyjson.com/recipes";
  try {
    const response = await fetch(api);

    if (!response.ok) {
      throw new Error(`Failed to fetch recipes: ${response.statusText}`);
    }

    const { recipes } = await response.json();
    return recipes; // Retourneer de receptenarray
  } catch (error) {
    console.error("Error fetching recipes:", error);
    if (error instanceof Error) {
      return error.message;
    }
    return "An unknown error occurred.";
  }
};

// Haal recepten op en log ze
fetchRecipes().then((data) => {
  if (Array.isArray(data)) {
    console.log("Recipes fetched successfully:", data);
  } else {
    console.error("Error message:", data);
  }
});

In het bovenstaande voorbeeld definiëren we een interface Recipe die de structuur van de gegevens schetst die we van de API verwachten. Vervolgens maken we de fetchRecipes() functie met async/await en de fetch() methode om een HTTP GET-verzoek naar het opgegeven API-eindpunt te doen.

We gebruiken een try/catch blok om eventuele fouten die tijdens het API-verzoek kunnen optreden af te handelen. Als het verzoek succesvol is, extraheren we de data-eigenschap uit de reactie met await en retourneren deze. Als er een fout optreedt, controleren we op een foutmelding en retourneren deze als een string als deze bestaat.

Eindelijk roepen we de fetchRecipes() functie aan en gebruiken we .then() om de teruggegeven gegevens naar de console te loggen. Dit voorbeeld toont aan hoe je async/await kunt gebruiken met try/catch blokken om fouten te verwerken in een geavanceerder scenario, waar we gegevens uit een responsobject moeten extraheren en een aangepaste foutmelding moeten retourneren.

Deze afbeelding toont het uitvoerresultaat van de code:

Async / Await met Promise.all

Promise.all() is een methode die een array van beloftes als invoer (een iterabele) neemt en een enkele belofte als uitvoer retourneert. Deze belofte wordt opgelost wanneer alle invoerbeloftes zijn opgelost of als de invoeriterabele geen beloftes bevat. Het wordt onmiddellijk afgewezen als een van de invoerbeloftes wordt afgewezen of als niet-beloftes een fout veroorzaken, en het zal worden afgewezen met de eerste afwijzingsmelding of fout.

// Voorbeeld van het gebruik van async / await met Promise.all
interface User {
  id: number;
  name: string;
  email: string;
  profilePicture: string;
}

interface Post {
  id: number;
  title: string;
  body: string;
}

interface Comment {
  id: number;
  postId: number;
  name: string;
  email: string;
  body: string;
}

const fetchApi = async <T>(url: string): Promise<T> => {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      return data;
    } else {
      throw new Error(`Network response was not ok for ${url}`);
    }
  } catch (error) {
    console.error(error);
    throw new Error(`Error fetching data from ${url}`);
  }
};

const fetchAllApis = async (): Promise<[User[], Post[], Comment[]]> => {
  try {
    const [users, posts, comments] = await Promise.all([
      fetchApi<User[]>("https://jsonplaceholder.typicode.com/users"),
      fetchApi<Post[]>("https://jsonplaceholder.typicode.com/posts"),
      fetchApi<Comment[]>("https://jsonplaceholder.typicode.com/comments"),
    ]);
    return [users, posts, comments];
  } catch (error) {
    console.error(error);
    throw new Error("Error fetching data from one or more APIs");
  }
};

fetchAllApis()
  .then(([users, posts, comments]) => {
    console.log("Users: ", users);
    console.log("Posts: ", posts);
    console.log("Comments: ", comments);
  })
  .catch((error) => console.error(error));

In de bovenstaande code hebben we Promise.all gebruikt om meerdere API’s tegelijkertijd op te halen. Als je verschillende API’s moet ophalen, kun je Promise.all gebruiken om ze allemaal in één keer te krijgen. Zoals je kunt zien, hebben we map gebruikt om door de array van API’s te lopen en deze vervolgens door te geven aan Promise.all om ze tegelijkertijd op te halen.

De onderstaande afbeelding toont de uitvoer van de API-aanroepen:

Laten we zien hoe we Promise.all met Axios kunnen gebruiken:

// Voorbeeld van het gebruik van async / await met axios en Promise.all

const fetchApi = async () => {
  try {
    const urls = [
      "https://jsonplaceholder.typicode.com/users",
      "https://jsonplaceholder.typicode.com/posts",
    ];
    const responses = await Promise.all(urls.map((url) => axios.get(url)));
    const data = await Promise.all(responses.map((response) => response.data));
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchApi();

In het bovenstaande voorbeeld gebruiken we Promise.all om gegevens van twee verschillende URL’s tegelijkertijd op te halen. Eerst maken we een array van URL’s, vervolgens gebruiken we de map om een array van Promises te creëren vanuit de axios.get aanroepen. We geven deze array door aan Promise.all, dat een array van antwoorden retourneert. Ten slotte gebruiken we de map opnieuw om de gegevens uit elk antwoord te halen en deze naar de console te loggen.

Hoe gebruik je callbacks in TypeScript

Een callback is een functie die als argument aan een andere functie wordt doorgegeven. De callback-functie wordt uitgevoerd binnen de andere functie. Callbacks zorgen ervoor dat een functie niet wordt uitgevoerd voordat een taak is voltooid – maar dat deze vervolgens meteen na het voltooien van de taak wordt uitgevoerd. Ze helpen ons om asynchrone JavaScript-code te schrijven en voorkomen problemen en fouten.

// Voorbeeld van het gebruik van callbacks in TypeScript

const add = (a: number, b: number, callback: (result: number) => void) => {
  const result = a + b;
  callback(result);
};

add(10, 20, (result) => {
  console.log(result);
});

De afbeelding hieronder toont de callback-functie:

Laten we een ander voorbeeld bekijken van het gebruik van callbacks in TypeScript:

// Voorbeeld van het gebruik van een callback-functie in TypeScript

type User = {
  name: string;
  email: string;
};

const fetchUserData = (
  id: number,
  callback: (error: Error | null, user: User | null) => void
) => {
  const api = `https://jsonplaceholder.typicode.com/users/${id}`;
  fetch(api)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Network response was not ok.");
      }
    })
    .then((data) => {
      const user: User = {
        name: data.name,
        email: data.email,
      };
      callback(null, user);
    })
    .catch((error) => {
      callback(error, null);
    });
};

// Gebruik van fetchUserData met een callback-functie
fetchUserData(1, (error, user) => {
  if (error) {
    console.error(error);
  } else {
    console.log(user);
  }
});

In het bovenstaande voorbeeld hebben we een functie genaamd fetchUserData die een id en een callback als parameters neemt. Deze callback is een functie met twee parameters: een fout en een gebruiker.

De functie fetchUserData haalt gebruikersgegevens op van een JSONPlaceholder API-eindpunt met behulp van de id. Als het ophalen succesvol is, maakt het een User-object aan en geeft het door aan de callback-functie met een null-fout. Als er een fout optreedt tijdens het ophalen, stuurt het de fout naar de callback-functie met een null-gebruiker.

Om de functie fetchUserData met een callback te gebruiken, verstrekken we een id en een callback-functie als argumenten. De callback-functie controleert op fouten en logt de gebruikersgegevens als er geen fouten zijn.

De onderstaande afbeelding toont de uitvoer van de API-oproepen:

Hoe Callbacks Verantwoord te Gebruiken

Hoewel callbacks fundamenteel zijn voor asynchrone programmering in TypeScript, vereisen ze zorgvuldig beheer om “callback hell” te vermijden – de piramidevormige, diep geneste code die moeilijk te lezen en te onderhouden wordt. Hier is hoe u callbacks effectief kunt gebruiken:

  1. Vermijd diep nesten

    • Maak uw code structuur vlakker door complexe bewerkingen op te splitsen in benoemde functies

    • Gebruik beloften of async/await voor complexe asynchrone workflows (hieronder meer hierover)

  2. Foutafhandeling eerst

    • Volg altijd de Node.js-conventie van (fout, resultaat) parameters

    • Controleer op fouten op elk niveau van geneste callbacks

    function processData(input: string, callback: (err: Error | null, result?: string) => void) {
      // ... bel altijd de callback met fout eerst
    }
  1. Gebruik type-annotaties

    • Benut het type-systeem van TypeScript om callback-signaturen af te dwingen

    • Definieer duidelijke interfaces voor callback-parameters

    type ApiCallback = (error: Error | null, data?: ApiResponse) => void;
  1. Overweeg controle-stroombibliotheken
    Voor complexe asynchrone bewerkingen, gebruik hulpprogramma’s zoals async.js voor:

    • Parallelle uitvoering

    • Seriële uitvoering

    • Foutafhandelingspijplijnen

Wanneer Callbacks vs. Alternatieven te Gebruiken

Er zijn momenten waarop callbacks een geweldige keuze zijn, en andere momenten waarop ze dat niet zijn.

Callbacks zijn nuttig wanneer je werkt met asynchrone bewerkingen (enkele voltooiing), interface met oudere bibliotheken of API’s die callbacks verwachten, het omgaan met gebeurtenisluisteraars (zoals klikluisteraars of websocketgebeurtenissen) of het maken van lichtgewicht hulpprogramma’s met eenvoudige asynchrone behoeften.

In andere scenario’s waarin je je moet richten op het schrijven van onderhoudbare code met een duidelijke asynchrone stroom, veroorzaken callbacks problemen en kun je beter voor promises of async-await kiezen. Bijvoorbeeld, wanneer je meerdere bewerkingen moet koppelen, complexe foutenpropagatie moet afhandelen, werken met moderne API’s (zoals de Fetch API of FS Promises), of promise.all() gebruiken voor parallelle uitvoering.

Voorbeeld migratie van callbacks naar promises:

// Callbackversie
function fetchUser(id: number, callback: (err: Error | null, user?: User) => void) {
  // ... 
}

// Promiseversie
async function fetchUserAsync(id: number): Promise<User> {
  // ...
}

// Gebruik met async/await
try {
  const user = await fetchUserAsync(1);
} catch (error) {
  // Foutafhandeling
}

De evolutie van Async-patronen

Patroon Voordelen Nadelen
Callbacks eenvoudig, universeel Geneste complexiteit
Promises Ketenbaar, betere foutverwerking Vereist .then() ketens
Async/Await Leesbaarheid zoals sync Vereist transpilatie

Moderne TypeScript-projecten gebruiken vaak een mix: callbacks voor evenementgestuurde patronen en promises/async-await voor complexe async-logica. De sleutel is het kiezen van het juiste hulpmiddel voor jouw specifieke use case, terwijl de code duidelijk blijft.

Conclusie

In dit artikel hebben we geleerd over de verschillende manieren om asynchrone code in TypeScript te beheren. We hebben geleerd over callbacks, promises, async/await en hoe deze in TypeScript te gebruiken. We hebben ook geleerd over dit concept.

Als je meer wilt leren over programmeren en hoe je een betere software-engineer kunt worden, kun je je abonneren op mijn YouTube-kanaal CliffTech.

Bedankt voor het lezen van mijn artikel. Ik hoop dat je het leuk vond. Als je vragen hebt, voel je vrij om contact met me op te nemen.

Verbind met me op sociale media: