forked from quentin/quentin.dufour.io
Update Article “2023-04-12-un-outil-sans-daemon-pour-gérer-ses-artefacts-de-build”
This commit is contained in:
parent
da59692a6f
commit
392d4c1745
1 changed files with 38 additions and 1 deletions
|
@ -113,9 +113,46 @@ e<!doctype html>
|
||||||
<body>
|
<body>
|
||||||
<pre>list</pre>
|
<pre>list</pre>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
console.log()
|
console.log("hello world")
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
On va avoir besoin d'une API du navigateur nommée `FileReader` mais cette dernière utilise la sémantique des callbacks. On va créer un wrapper avec des Promises pour simplifier son utilisation :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const reader = blob => {
|
||||||
|
const tmp = new FileReader();
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
tmp.onerror = () => {
|
||||||
|
tmp.abort()
|
||||||
|
reject(new DOMException("Problem parsing blob"))
|
||||||
|
}
|
||||||
|
tmp.onload = () => {
|
||||||
|
resolve(tmp.result)
|
||||||
|
}
|
||||||
|
tmp.readAsText(blob)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Et maintenant on peut simplement écrire notre logique pour récupérer la liste des tags :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const albatros_tags = async () => {
|
||||||
|
const res = await fetch('https://registry.deuxfleurs.org/v2/albatros/tags/list')
|
||||||
|
const blob = await res.blob()
|
||||||
|
const txt = await reader(blob)
|
||||||
|
const tags = JSON.parse(txt)
|
||||||
|
return tags
|
||||||
|
}
|
||||||
|
|
||||||
|
(async () => console.log(await albatros_tags()))()
|
||||||
|
```
|
||||||
|
|
||||||
|
Ensuite il ne reste plus qu'à l'insérer dans le DOM de la page :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue