javascript / expert
Snippet
Suspense-kompatibles Ressourcen-Caching
Um manuell mit React Suspense zu interagieren, muss ein Daten-Fetcher eine Promise 'werfen', während er aussteht. Dieses Muster schafft eine einfache, aber leistungsstarke Brücke für asynchrone Ressourcen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const cache = new Map();function fetchData(url) {if (cache.has(url)) return cache.get(url);const promise = fetch(url).then(r => r.json()).then(data => cache.set(url, { status: 'success', data })).catch(error => cache.set(url, { status: 'error', error }));cache.set(url, { status: 'pending', promise });throw promise;}function ResourceComponent({ url }) {const resource = fetchData(url);if (resource.status === 'pending') throw resource.promise;return <div>{resource.data.title}</div>;}
react
Erklärung
1
throw promise
Der Mechanismus, der React signalisiert, dass die Komponente noch nicht bereit zum Rendern ist.
2
cache.set(url, { status: 'success', data })
Speichert das Ergebnis, um sicherzustellen, dass nachfolgende Renderings die Daten sofort zurückgeben.
3
if (cache.has(url)) return cache.get(url)
Verhindert redundante Netzwerkanfragen, indem zuerst der lokale Cache geprüft wird.