How do I use fetch with async/await in TypeScript?

How do I use fetch with async/await in TypeScript?

You can use the fetch API with async/await in TypeScript by defining an async function. Here's a simple example:

async function fetchData(url: string) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
}

This function fetches data from the provided URL and returns the parsed JSON.

What if I want to handle errors more gracefully?

You can use a try-catch block to handle errors. Here's an updated version of the function:

async function fetchData(url: string) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error;
    }
}

Can I use TypeScript interfaces to define the data structure?

Absolutely! You can define an interface for the expected data structure. For example:

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

async function fetchUser(url: string): Promise<User> {
    const response = await fetch(url);
    const user: User = await response.json();
    return user;
}