Usar Apis Desde React

---

## ¿Qué es una Promesa?

Promise es un objeto que proporciona una construcción útil cuando se trabaja con tareas asincrónicas.

```js
// Crear una promesa
const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (true) {
      resolve('Successfull login');
    } else {
      reject('Login failed');
    }
  }, 1000);
});
```

```js
// Usar una promesa
p.then((res) => {
  console.log(res);
})
.catch((err) => {
  console.log(err);
})
```

</div>

---

## Crear proyecto

```bash
npm create vite@latest react-demo-api-rick-and-morty -- --template react
```

---

## `Hook useState`

Al pedir información, tenemos que crear un estado que se encarhará de guardar el resultado de la petición.

```jsx
import { useState } from 'react';

export default () => {
  const [characters, setCharacters] = useState([]);
}
```

---

```jsx
import { useState, useEffect } from "react";
import { Container, Row, Col, Card } from "react-bootstrap";

export default () => {
  const [characters, setCharacters] = useState([]);
  const [page, setpage] = useState(1);

useEffect(() => {
    const fetchApi = async () => {
      try {
        const response = await fetch(
          `https://rickandmortyapi.com/api/character?page=${page}`,
        );
        const data = await response.json();
        setCharacters(data.results);
      } catch (e) {
        console.log(e.message);
      }
    };

fetchApi();
  }, [page]);
};
```