URL: https://linuxfr.org/users/n_e/journaux/recherche-totoz-en-javascript
Title: recherche-totoz en JavaScript
Authors: n_e
Date: 2018年11月30日T12:25:43+01:00
Tags: 
Score: 8
En discutant avec plusieurs personnes, j'ai constaté qu'ils pensaient que JavaScript était encore pénible à utiliser, en particulier en ce qui concerne l'appel d'APIs asynchrones et le "callback hell".
Pour illustrer le sujet, j'ai fait un petit programme qui recherche des totoz sur [totoz.eu](https://totoz.eu) et affiche leur nom sur le terminal.
Le programme doit :
- Appeler l'API https://totoz.eu/search.xml?terms=plop
- Parser le fichier xml et récupérer les noms
- Afficher les noms sur le terminal
Ecrire le programme ne présente aucune difficulté, mais selon le langage cela peut être un peu pénible.
Avant de vous montrer le programme, un petit rappel sur la [concurrence](https://linuxfr.org/users/j_m/journaux/execution-concurrente-vs-parallele) en JavaScript :
- Un programme JavaScript est mono-threadé (il y a des façons de passer outre mais ce n'est pas le modèle "normal" d'utilisation)
- Pour ne pas tout bloquer dès qu'on appelle une fonction qui prend du temps, la plupart des APIs sont asynchrones : elles retournent immédiatement, sans attendre que le traitement soit fini.
- Traditionnellement, pour utiliser le résultat du traitement, il fallait passer un callback à la fonction, qui était exécuté une fois le résultat disponible
- Aujourd'hui, on peut utiliser des fonctions dites asynchrones (mot-clé async), dont la syntaxe ressemble à celle des fonctions normales, mais qui peuvent appeler d'autres fonctions asynchrones et n'exécuter l'instruction suivante qu'une fois le résultat des autres fonctions disponible, tout en rendant le contrôle le temps que les autres fonctions s'exécutent.
Voilà donc le programme ([et le projet complet sur github](https://github.com/n-e/recherche-totoz-js)) :
```javascript
const fetch = require('node-fetch')
const xmljs = require('xml-js')
async function searchTotoz(query) {
 const res = await fetch(
 'https://totoz.eu/search.xml?terms=' + 
 encodeURIComponent(query))
 const xml = await res.text()
 const obj = xmljs.xml2js(xml,{compact: true})
 const totozList = obj.totozes.totoz.length ? obj.totozes.totoz : [obj.totozes.totoz]
 const totozNamesStr = totozList.map(t => t.name._text).join('\n')
 console.log(totozNamesStr)
}
if (process.argv[2]) {
 searchTotoz(process.argv[2])
 .catch(err => console.error(err.message))
}
else
 console.error("Syntax: npm start QUERY")
```
Et vous, comment écririez-vous ce programme dans votre langage favori (en faisant la requête HTTP de façon asynchrone) ?
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/users/n_e/journaux/recherche-totoz-en-javascript.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/users/n_e/journaux/recherche-totoz-en-javascript.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>