p5.js | Función httpGet()

La función httpGet() en p5.js se usa para ejecutar una solicitud HTTP GET. p5 adivina automáticamente el tipo de datos devuelto en función de la URL, cuando no se especifica.
Los datos se pueden cargar en la función preload() para que se pueda acceder a ellos inmediatamente en el programa.
Sintaxis: 

httpGet( path, [datatype], [data], [callback], [errorCallback] )

O 
 

httpGet( path, data, [callback], [errorCallback] )

O 
 

httpGet( path, callback, [errorCallback] )

Parámetros: esta función acepta cinco parámetros, como se mencionó anteriormente y se describe a continuación. 
 

• ruta: Es una string que denota la ruta de la URL o archivo a cargar.
• datatype: Es una string que especifica el tipo de datos que se recibirán. Puede tener los valores de «json», «jsonp», «binary», «arrayBuffer», «xml» o «text». El uso del tipo de datos ‘binario’ devolverá un objeto Blob y el uso de ‘arrayBuffer’ devolverá una array escrita. Por defecto será ‘texto’ si no se especifica ningún parámetro. Es un parámetro opcional.
• data: es un objeto o un valor booleano que especifica los datos del parámetro pasados ​​con la solicitud.
• devolución de llamada: es una función que se llama cuando esta función se ejecuta con éxito. El primer argumento de esta función son los datos devueltos por la API. Es un parámetro opcional.
• errorCallback: Es una función a la que se llama si hay algún error en la ejecución de la función. El primer argumento para esta función es la respuesta de error. Es un parámetro opcional.

Valor de Retorno: Devuelve una promesa que puede ser resuelta con los datos cuando la operación se completa con éxito, o ser rechazada cuando se produce un error.
Los siguientes ejemplos ilustran la función httpGet() en p5.js:
Ejemplo 1: 
 

let user_data;
 
function preload() {
 
  // Get a random user from the test API
  let api_url =
    'https://reqres.in/api/users/' + int(random(1, 10));
 
  httpGet(api_url, 'json', false, function (response) {
    user_data = response;
  });
 
  // Log the received data to console
  console.log(user_data);
}
 
function setup() {
  createCanvas(550, 200);
  textSize(18);
}
 
function draw() {
  clear();
  if (!user_data)
    return;
 
  text("Data fetched from API, can be viewed "
        + "in console", 20, 60);
 
  text("The First Name in the data is: "
       + user_data.data.first_name, 20, 100);
 
  text("The Last Name in the data is: "
       + user_data.data.last_name, 20, 120);
 
  text("The Email in the data is: "
       + user_data.data.email, 20, 140);
}

Producción: 
 

Ejemplo 2: 
 

function setup() {
  createCanvas(550, 200);
  textSize(18);
 
  // Get a random user from the test API
  let api_url =
    'https://reqres.in/api/users/' + int(random(1, 10));
 
  httpGet(api_url, 'json', false, onSuccessfulFetch, onErrorFetch);
}
 
function onSuccessfulFetch(response) {
  text("Data successfully fetched from API, "
      + "can be viewed in console", 20, 60);
 
  text("The First Name in the data is: "
      + response.data.first_name, 20, 100);
 
  text("The Last Name in the data is: "
      + response.data.last_name, 20, 120);
 
  text("The Email in the data is: "
      + response.data.email, 20, 140);
}
 
function onErrorFetch() {
  text("There was an error fetching the data.", 20, 60);
}

Producción: 
 

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5/httpGet