Exemples d’aplicació que consumeix l’API en Javascript.
En aquest cas es realitza un consum del recurs de l’API https://api.meteo.cat/referencia/v1/municipis. Un cop s’obté una resposta, mostra per pantalla els valors i en la consola del navegador el contingut de la resposta (en aquest cas la resposta sencera són les metadades de tots els municipis de Catalunya, de manera que es pinten totes les dades del tots els municipi de la llista).
Per el primer exemple s’ha utilitzat Javascript pur, sense llibreries extra, farem servir l’objecte XMLHttpRequest.
Primer definim una funció per fer la crida http, amb els paràmetres necessaris en el header de la petició http:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function httpGet(url, key, callback) { var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET', url, true); xmlHttp.setRequestHeader('X-Api-Key', key); xmlHttp.setRequestHeader('Content-Type', 'application/json'); xmlHttp.onload = function () { //pasem el retorn a la funció callback callback(this.responseText); }; xmlHttp.onerror = function () { document.getElementById('txt1').innerHTML = "hi ha hagut un error en la consulta a l'API"; }; xmlHttp.send(); } |
Quant volguem fer una crida a l’API li haurem de passar els paràmetres “url”, “key” i la funció callback per tractar les dades, tal com:
|
0 1 2 3 4 5 6 7 8 9 10 |
function testingAPI() { var key = 'XXXXXX'; var url = 'https://api.meteo.cat/referencia/v1/municipis'; httpGet(url, key, function (data) { //TODO data té els valors del retorn de la consulta a l'API, en aquest cas els mostrem per pantalla en plà i en la consola del navegador document.getElementById('txt1').innerHTML = data; console.log(data); }); } |
Per tal d’executar-lo, s’ha de cridar a la funció des de un fitxer html, un exemple senzill d’html seria:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <meta charset="utf-8" /> <title>Proves</title> </head> <body> <p id="txt1" /> <script type="text/javascript"> testingAPI(); </script> </body> </html> |
Un segon exemple amb la llibreria jQuery, utilitzant AJAX. Definim la funció amb la crida AJAX a l’API, amb els paràmetres necessaris per fer la crida http:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function ajaxCall(url, key, callback) { $.ajax({ type: 'GET', url: url, crossDomain: true, contentType: 'application/json', dataType: 'json', headers: { 'X-Api-Key': key, }, success: function (data, status) { callback(JSON.stringify(data)); }, }); } |
D’igual manera que en el exemple anterior, quant volguem fer una crida a l’API li haurem de passar els paràmetres “url”, “key” i la funció callback per tractar les dades, tal com:
|
0 1 2 3 4 5 6 7 8 9 10 |
function testingAPI() { var key = 'XXXX'; var url = 'https://api.meteo.cat/referencia/v1/municipis'; ajaxCall(url, key, function (data) { //TODO data té els valors del retorn de la consulta a l'API, en aquest cas els mostrem per pantalla en plà i en la consola del navegador document.getElementById('txt1').innerHTML = data; console.log(data); }); } |
Per tal d’executar-lo, s’ha de cridar a la funció des de un fitxer html, un exemple senzill d’html on s’hauria d’importar la llibreria jQuery, seria:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <meta charset="utf-8" /> <title>Proves</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <p id="txt1" /> <script type="text/javascript"> testingAPI(); </script> </body> </html> |
Notar, que si les consultes es fan des de Javascript tal qual els dos exemples d’aquesta pàgina, l’API key queda exposada i és susceptible a que altre gent la pugui utilitzar i us quedeu sense quota.