Typescript Asynchrone Functies en Await Gebruik
description
Met deze prompt leer ik effectief asynchrone code schrijven in Typescript, wat mijn applicaties responsiever maakt en het beheer van promises vereenvoudigt. Het helpt me fouten correct af te handelen en mijn code overzichtelijk te houden, wat beter is dan het gebruik van callbacks of losse then/catch-ketens.
prompt
Leg uit hoe ik asynchrone functies kan schrijven in Typescript voor <beschrijving van de asynchrone taak of f ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een uitleg over het schrijven van asynchrone functies in TypeScript voor het ophalen en verwerken van data van een externe API, inclusief voorbeelden met `async/await` en foutafhandeling met `try/catch`.
### Stap 1: Definieer een asynchrone functie
Gebruik het sleutelwoord `async` voor de functie. Hierdoor kun je binnen de functie `await` gebruiken om promises te wachten.
### Stap 2: Data ophalen met `fetch`
Gebruik de `fetch` API (beschikbaar in browsers en in Node.js met extra modules zoals `node-fetch`) om data op te halen.
### Stap 3: Afhandelen van fouten
Gebruik `try/catch` om fouten tijdens het ophalen of verwerken van data op te vangen.
### Voorbeeld:
```typescript
// Functie om data op te halen van een externe API
async function haalDataOp(url: string): Promise<any> {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Netwerkfout: ${response.status} ${response.statusText}`);
}
const data = await response.json();
// Verwerk de data hier indien nodig
return data;
} catch (error) {
console.error('Fout bij het ophalen van data:', error);
throw error; // Hergooi de fout indien nodig
}
}
// Voorbeeld gebruik
const apiUrl = 'https://api.example.com/data';
haalDataOp(apiUrl)
.then(data => {
console.log('Ontvangen data:', data);
// Verder verwerken van data
})
.catch(error => {
console.error('Fout tijdens verwerking:', error);
});
```
### Uitleg:
- De functie `haalDataOp` is `async`, waardoor het `await` kan gebruiken.
- `fetch` wordt gebruikt om data op te halen.
- Als de response niet ok is, wordt een fout gegooid.
- De data wordt geparsed met `response.json()`.
- Fouten worden gevangen in de `catch`-blok en gelogd.
- Bij gebruik wordt de functie aangeroepen en afgehandeld met `.then()` en `.catch()`, of je kunt ook `await` gebruiken binnen een andere `async` functie.
### Alternatief met `async/await` gebruiken voor het aanroepen:
```typescript
async function main() {
try {
const data = await haalDataOp(apiUrl);
console.log('Data in main:', data);
} catch (error) {
console.error('Fout in main:', error);
}
}
main();
```
Zo kun je effectief asynchrone data-ophaling en -verwerking doen in TypeScript.
provider: deepseek
model: deepseek-chat
Zeker, hier is een uitleg over asynchrone functies in TypeScript voor API calls:
### Basisstructuur asynchrone functie
```typescript
async function fetchData(): Promise<DataType> {
const response = await fetch('https://api.voorbeeld.com/data');
const data = await response.json();
return data;
}
```
### Compleet voorbeeld met foutafhandeling
```typescript
interface User {
id: number;
name: string;
email: string;
}
async function fetchUserData(userId: number): Promise<User> {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP-fout: ${response.status}`);
}
const userData: User = await response.json();
return userData;
} catch (error) {
console.error('Fout bij ophalen gebruikersdata:', error);
throw error; // Opnieuw gooien voor verdere afhandeling
}
}
// Gebruik van de functie
async function main() {
try {
const user = await fetchUserData(1);
console.log('Gebruiker:', user);
} catch (error) {
console.error('Kon gebruiker niet ophalen:', error);
}
}
main();
```
### Meerdere parallelle requests
```typescript
async function fetchMultipleUsers(userIds: number[]): Promise<User[]> {
try {
const promises = userIds.map(id =>
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
);
return await Promise.all(promises);
} catch (error) {
console.error('Fout bij parallelle requests:', error);
throw error;
}
}
```
### Met aangepaste timeout
```typescript
async function fetchWithTimeout(url: string, timeoutMs = 5000): Promise<any> {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
try {
const response = await fetch(url, {
signal: controller.signal
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return await response.json();
} catch (error) {
clearTimeout(timeoutId);
if (error.name === 'AbortError') {
throw new Error('Request timeout');
}
throw error;
}
}
```
### Belangrijke punten:
1. **`async`** keyword voor de functie
2. **`await`** voor asynchrone operaties
3. **`try/catch`** voor foutafhandeling
4. **Promise return type** voor typeveiligheid
5. **Response checking** (`response.ok`) voor HTTP-fouten
6. **Proper error handling** met doorgooien of afhandelen
### TypeScript interfaces voor typeveiligheid:
```typescript
interface ApiResponse<T> {
data: T;
status: number;
message?: string;
}
```
Dit patroon zorgt voor propere foutafhandeling en typeveiligheid in je TypeScript applicatie.