¿Cómo conectarse a una API en JavaScript?

Una interfaz de programación de aplicaciones o API es un intermediario que transporta datos de solicitud/respuesta entre los puntos finales de un canal. Podemos visualizar una analogía de API a la de un mesero en un restaurante. Un típico mesero en un restaurante te daría la bienvenida y te pediría tu pedido. Él/Ella confirma lo mismo y lleva este mensaje y lo publica en la cola/cocina de pedidos. Tan pronto como su comida esté lista, también la llevará de la cocina a su mesa. Como tal, en un escenario típico, cuando un punto final de cliente solicita un recurso de un punto final de servidor de recursos, esta solicitud se lleva a través de la API al servidor. Hay una diversa información relevante que transportan las API que se ajustan a ciertas especificaciones de esquema, como la proporcionada por OpenAPI., GraphQL , etc. Esta información puede incluir URL de extremos, operaciones (GET, POST, PUT, etc.), métodos de autenticación, tokens, licencia y otros parámetros operativos. Las API suelen seguir el formato JSON y XML como su modo clave de intercambio de solicitud/respuesta, mientras que algunas también se adhieren al formato YAML .

En su mayoría, la respuesta generada por un servidor de recursos es un esquema JSON que lleva la información de estado del recurso solicitado en el otro extremo. Como tales, estas API se han denominado API REST , donde REST significa Transferencia de estado de presentación RE . El estado de los recursos puede verse afectado por las operaciones de la API. También se debe tener en cuenta que también hay API del sistema que utiliza el sistema operativo para acceder a las funciones del kernel. Un ejemplo común incluiría Win32API, que es una API de plataforma de Windows y actúa como un puente para las operaciones a nivel del sistema, como la selección de archivos/carpetas, el diseño de botones, etc. La mayoría de los lenguajes de programación que tienen bibliotecas GUI están envueltos en esta capa.

Solicitud de muestra de una API (API de geolocalización de Google) :

{
    "homeMobileCountryCode": 310,
    "homeMobileNetworkCode": 311,
    "radioType": "gsm",
    "carrier": "airtel",
    "considerIp": "true",
    "cellTowers": [
        {
            "cellId": 22,
            "locationAreaCode": 115,
            "mobileCountryCode": 310,
            "mobileNetworkCode": 311,
            "age": 0,
            "signalStrength": -40,
            "timingAdvance": 12
          }
    ],
    "wifiAccessPoints": [
        {
        "macAddress": "00:25:9e:ff:jc:wc",
        "signalStrength": -33,
        "age": 0,
        "channel": 12,
        "signalToNoiseRatio": 0
        }
    ]
  }

Ejemplo de respuesta:

{
    "location": {
      "lat": 41.1,
      "lng": -0.1
    },
    "accuracy": 1200.2
  }

El esquema, el precio de uso, etc. de una API depende de la organización que proporciona la API. Hay API disponibles gratuitamente, como la API de PageCDN, así como API basadas en modelos de precios de pago por uso, como la API estática de Street View. Las API permiten a un cliente/programador usar la infraestructura y los servicios en la nube de una organización para obtener acceso a varios recursos a través de Internet. Una API generalmente requiere una clave de API(único) junto con algunas credenciales opcionales para autenticar una solicitud de recursos realizada por un cliente. Los programadores web a menudo confían en las API para realizar varios trucos increíbles, como mostrar tweets filtrados a través de la API de Twitter en su página de inicio, convertir HTML a pdf a través de la API HTML2PDF, etc. , etc.) proporciona contenido bajo demanda. Los desarrolladores de aplicaciones móviles también utilizan API en gran medida, como las API meteorológicas, la geolocalización, la API de Google Analytics, etc.

Conéctese a una API usando JavaScript:

Para realizar llamadas a la API usando JavaScript, se puede hacer una referencia bajo la etiqueta <script> a la biblioteca de JavaScript que contiene funciones y otros parámetros de configuración relacionados con la API. Una buena API siempre mantiene la documentación adecuada a sus funciones y parámetros. En la mayoría de los casos, esta biblioteca js está disponible a través de la red de entrega de contenido (CDN) para que responda. JavaScript contiene funciones para serializar y deserializar un objeto JSON y, por lo tanto, manejar las respuestas JSON y atravesar/analizar la respuesta también se administra dentro del mismo script.

El siguiente fragmento muestra el ejemplo más simple del uso de la API de visualización de Google para construir un gráfico a partir de los datos
presentes en las hojas de Google (hoja de cálculo).

Se hace una referencia a la biblioteca js que contiene las funciones necesarias de la siguiente manera:

<script type="text/javascript" 
        src=
"https://www.gstatic.com/charts/loader.js">
</script>

      
    google.load('visualization', '1', 
            {
              'packages':['corechart', 'table', 'geomap']
            }
    );
      
    google.setOnLoadCallback(drawGID);
      
        function drawGID() {
          //var queryString = encodeURIComponent('SELECT A, B LIMIT 5');
      var query = 
new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/spreadsheetId/gviz/tq?range=');
      query.send(handleQueryResponse);
    }
    var resp;
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() +
            ' ' + response.getDetailedMessage());
        return;
      }
  
      var data = response.getDataTable();
      resp = response;
      var chart =
 new google.visualization.LineChart(
      document.getElementById('any_div_or_container'));
      chart.draw(data, { height: 400, curveType: 'function',
          legend: { position: 'bottom' }});
    }

El código anterior contiene una función de devolución de llamada que se activa cuando se carga la ventana. Se pasa al servidor una string de consulta que contiene el ID de la hoja de cálculo y otros parámetros. Aquí , el ID de la hoja de cálculo debe reemplazarse por el ID de la hoja de cálculo en cuestión. La string ‘any_div_or_container’ debe ser reemplazada por el elemento DOM en el que deseamos mostrar los resultados en nuestra página. El controlador de respuesta analiza la respuesta y verifica el tipo de contenido, después de lo cual analiza los datos para producir el resultado deseado. El código anterior se ejecuta con una hoja de cálculo de muestra que genera una respuesta JSON como se muestra a continuación:

gvjs_rl {wva: "0.6", qX: "ok", hv: Array(0), Sw: Array(0), O2: "1651350667", …}
wva: "0.6"
qX: "ok"
hv: []
Sw: []
O2: "1651350667"
R: gvjs_L
$p: null
Ff: Array(2)
0: {id: "A", label: "", type: "datetime", pattern: "M/d/yyyy H:mm:ss", p: {…}}
1: {id: "B", label: "", type: "number", pattern: "General"}
length: 2
__proto__: Array(0)
eg: (98) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, ...]
Fr: null
cache: []
version: "0.6"
__proto__: gvjs_$k
__proto__: Object

Captura de pantalla de salida del gráfico de líneas de muestra: