El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Treballant amb APIs

Següent ►
►

En aquest tema, aprendrem com treballar amb APIs en TypeScript. Les APIs (Application Programming Interfaces) són una part fonamental del desenvolupament web modern, ja que permeten la comunicació entre diferents serveis i aplicacions. Utilitzarem fetch per fer sol·licituds HTTP i veurem com gestionar les respostes de manera eficient amb TypeScript.

Continguts

  1. Introducció a fetch
  2. Tipant les respostes de l'API
  3. Exemple pràctic: Consumint una API pública
  4. Gestió d'errors
  5. Exercicis pràctics

  1. Introducció a fetch

fetch és una API moderna per fer sol·licituds HTTP. És una alternativa a XMLHttpRequest i proporciona una interfície més senzilla i poderosa.

Exemple bàsic de fetch

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

  1. Tipant les respostes de l'API

Per aprofitar al màxim TypeScript, és important definir els tipus de les dades que esperem rebre de l'API. Això ens ajuda a evitar errors i a treballar de manera més eficient.

Definint una interfície per a la resposta

Suposem que l'API retorna un objecte amb la següent estructura:

{
  "id": 1,
  "name": "John Doe",
  "email": "[email protected]"
}

Podem definir una interfície per a aquesta resposta:

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

Utilitzant la interfície amb fetch

fetch('https://api.example.com/user/1')
  .then(response => response.json())
  .then((data: User) => {
    console.log(data.id);
    console.log(data.name);
    console.log(data.email);
  })
  .catch(error => console.error('Error:', error));

  1. Exemple pràctic: Consumint una API pública

Anem a consumir una API pública per veure com funciona tot plegat. Utilitzarem l'API de GitHub per obtenir informació sobre un usuari.

Definint la interfície

interface GitHubUser {
  login: string;
  id: number;
  avatar_url: string;
  html_url: string;
}

Consumint l'API de GitHub

fetch('https://api.github.com/users/octocat')
  .then(response => response.json())
  .then((data: GitHubUser) => {
    console.log(`Usuari: ${data.login}`);
    console.log(`ID: ${data.id}`);
    console.log(`Avatar: ${data.avatar_url}`);
    console.log(`Perfil: ${data.html_url}`);
  })
  .catch(error => console.error('Error:', error));

  1. Gestió d'errors

És important gestionar els errors de manera adequada quan es treballa amb APIs. Això inclou tant errors de xarxa com errors de l'API mateixa.

Exemple de gestió d'errors

fetch('https://api.github.com/users/octocat')
  .then(response => {
    if (!response.ok) {
      throw new Error('Error en la sol·licitud');
    }
    return response.json();
  })
  .then((data: GitHubUser) => {
    console.log(`Usuari: ${data.login}`);
  })
  .catch(error => console.error('Error:', error));

  1. Exercicis pràctics

Exercici 1: Consumir una API de clima

  1. Busca una API pública de clima (per exemple, OpenWeatherMap).
  2. Defineix una interfície per a la resposta de l'API.
  3. Fes una sol·licitud a l'API per obtenir el clima d'una ciutat.
  4. Mostra la informació del clima a la consola.

Solució

interface Weather {
  main: {
    temp: number;
    humidity: number;
  };
  weather: {
    description: string;
  }[];
}

fetch('https://api.openweathermap.org/data/2.5/weather?q=Barcelona&appid=YOUR_API_KEY')
  .then(response => {
    if (!response.ok) {
      throw new Error('Error en la sol·licitud');
    }
    return response.json();
  })
  .then((data: Weather) => {
    console.log(`Temperatura: ${data.main.temp}`);
    console.log(`Humitat: ${data.main.humidity}`);
    console.log(`Descripció: ${data.weather[0].description}`);
  })
  .catch(error => console.error('Error:', error));

Exercici 2: Gestió d'errors avançada

  1. Modifica l'exercici anterior per gestionar errors de manera més detallada.
  2. Mostra un missatge d'error diferent per a errors de xarxa i errors de l'API.

Solució

fetch('https://api.openweathermap.org/data/2.5/weather?q=Barcelona&appid=YOUR_API_KEY')
  .then(response => {
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('Ciutat no trobada');
      } else {
        throw new Error('Error en la sol·licitud');
      }
    }
    return response.json();
  })
  .then((data: Weather) => {
    console.log(`Temperatura: ${data.main.temp}`);
    console.log(`Humitat: ${data.main.humidity}`);
    console.log(`Descripció: ${data.weather[0].description}`);
  })
  .catch(error => {
    if (error.message === 'Ciutat no trobada') {
      console.error('Error: La ciutat especificada no existeix.');
    } else {
      console.error('Error:', error);
    }
  });

Conclusió

En aquesta secció, hem après com treballar amb APIs en TypeScript utilitzant fetch. Hem vist com definir interfícies per tipar les respostes de l'API, com gestionar errors i hem practicat amb exemples reals. Amb aquests coneixements, estàs preparat per integrar APIs en les teves aplicacions TypeScript de manera eficient i segura.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats