Ciao ragazzi, sono bloccato da due giorni su un problema che mi sembra banale ma non capisco dove sbaglio. Sto usando async/await in JavaScript per gestire una chiamata API, ma il codice non si comporta come mi aspetto. Ecco un estratto:
```javascript
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data); // Qui non stampa nulla!
}
```
Ho verificato che l'endpoint sia corretto e funzioni con Postman, ma quando eseguo questa funzione nel browser non ottengo output né errori. Ho già provato ad aggiungere .catch() e a incapsulare tutto in try/catch senza successo. Qualcuno ha idea del perché await si blocchi silenziosamente? Forse c'è qualche concetto fondamentale che mi sfugge sulle Promise? Ogni suggerimento è ben accetto, grazie mille!
Ehi yaelconti98, ti capisco benissimo! Anche io ho perso ore su problemi simili. Provo a darti qualche suggerimento basato sulla mia esperienza:
1. **Hai invocato la funzione?** Sembra banale, ma spesso dimentichiamo di chiamare `fetchData()` dopo la dichiarazione. A me è successo troppe volte!
2. **Controlla lo status della response**
Aggiungi un controllo sullo status HTTP prima di fare il `.json()`:
```javascript
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
```
Il metodo `.json()` fallisce silenziosamente se la response non è valida.
3. **Problema CORS?**
Usi un endpoint pubblico o locale? Nel browser controlla la console (scheda Network) per errori CORS. Postman non ha restrizioni CORS, il browser sì.
4. **Debugging step-by-step**
Inserisci `console.log(response)` prima del `.json()`. Se vedi l'oggetto response ma non i dati, il problema è nel parsing. Se non vedi neanche la response, il fetch stesso fallisce.
5. **Alternative**
Prova con un endpoint pubblico di test come `https://jsonplaceholder.typicode.com/todos/1`. Se funziona, il problema è nel tuo endpoint.
Fammi sapere se riesci a vedere il log della response! Se hai ancora problemi, posta uno screenshot della console (soprattutto eventuali errori in rosso). In bocca al lupo! 🍀
Ciao @yaelconti98, capisco la frustrazione: quando async/await sembra ingoiare errori senza log, è un problema comune ma subdolo. Considerando che hai già provato try/catch e .catch senza risultati, propongo due verifiche aggiuntive:
1. **Unhandled Promise Rejection**:
Se la tua funzione non è invocata con `await` o `.catch()`, il browser potrebbe non loggare l'errore. Inserisci questo in cima al codice:
```javascript
window.addEventListener('unhandledrejection', event => console.error("Unhandled error:", event.reason));
```
2. **Blocchi estranei**:
- Disabilita temporaneamente le estensioni del browser (spesso bloccano richieste silenziosamente)
- Nella scheda Network, controlla se la richiesta appare come (blocked) o con status CORS rosso. Postman ignora CORS, il browser no.
3. **Debugging chirurgico**:
Stampa `response` prima del `.json()` per verificare l'effettiva presenza della risposta. Se vedi `Response { ... }` ma poi il log sparisce, il problema è nel parsing (es. body vuoto non valido per JSON).
Se puoi, condividi lo status di `response.status` e `response.headers.get('content-type')`, così vediamo se il server ritorna HTML d'errore invece di JSON. Per esperienza, è un classico.
Grazie mille @serendesantis! Hai centrato il problema: nella scheda Network ho visto che l'API restituiva errore 401 per un token scaduto, ma il `fetch` non lanciava eccezioni e il `.json()` falliva in silenzio. Ho aggiunto un controllo manuale sullo status code prima di chiamare `.json()` e ora funziona! È stato illuminante scoprire che il fetch considera solo errori di rete come veri errori. Per sicurezza ho anche messo l'handler `window.onunhandledrejection` come suggerito.
Fantastico Yael, che bello vedere che hai risolto! Quell'errore 401 silenzioso è una vera trappola - ci sono cascata pure io mesi fa su un progetto. Il fetch che ignora gli status HTTP fuori dal 200-299 è una delle cose più controintuitive di JavaScript, sembra quasi un bug ma è "by design".
Ora che hai implementato il controllo manuale sullo status code, ti consiglio di creare una piccola funzione helper tipo:
```javascript
async function safeFetch(url) {
const res = await fetch(url);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
return res.json();
}
```
Così eviti di riscrivere la logica ogni volta. E grazie per aver condiviso la soluzione con la community - quel dettaglio di window.onunhandledrejection è oro per chi legge il thread dopo.
PS: se lavori spesso con API, considera librerie come Axios che gestiscono automaticamente questi casi, anche se capisco la soddisfazione di risolvere con vanilla JS! 💪