class: center, middle, inverse

# Javascript
### Async & Fetch

.footnote[Mateu Yábar]

---
# Pàgines dinàmiques
- Generadors de pàgines estàtiques
- Servidor
  - Genera html per cada request
  - Javascript -> API servidor
    - Webapps

---
- Prova el següent html
```
<body>
    <input></input>
    <button>Long Operation</button>
</body>
<script>
    function longOp(){ // simulate very long operation
        const times =100000000;
        for(let i = 0; i < times; i++){
            console.log(i)
            for(let j = 0; j < times; j++) {
                let x = i+j
            }
        }
    }
    document.querySelector("button").addEventListener("click", longOp)
</script>
```

---
# Preguntes
- Que ha passat?
- Perquè creus que ha passat?

---
# Programació concurrent
- Múltiples processos s’executen alhora
  - Poden comunicar-se entre ells.
- Noms: Porcés/thread/fil/corutina

---
# Programació concurrent - UI
- Un procés actualitza la UI.
- Si es fan operacions pesades al procés principal queda bloquejada
  - S'ha d'usar nous processos

---
# Programació concurrent JS
- Les funcions async no retornen el resultat sinó una promise
- Per esperar al resultat podem usar await

---
```javascript
const url = "https://example.org/products.json";
const response = fetch(url);
```
- Fetch no s'executa al moment, sinó que retorna un promise

---
# Fetch

```javascrript
async function getData() {
  const url = "https://example.org/products.json";
  const response = await fetch(url);
  const json = await response.json();
  console.log(json);
}
getData();
```

---
# Fetch

```javascrript
async function getData() {
  const url = "https://analisi.transparenciacatalunya.cat/resource/gn9e-3qhr.json";
  const response = await fetch(url);
  const json = await response.json();
  console.log(json[0].estaci);
}
getData();
```