p5.js | Función httpDo()

La función httpDo() en p5.js se usa para ejecutar una solicitud HTTP. El tipo de solicitud HTTP se puede especificar como un parámetro, que por defecto es una solicitud HTTP. p5 adivina automáticamente el tipo de datos devuelto en función de la URL, cuando no se especifica. El parámetro de opciones se puede usar para especificar propiedades avanzadas de acuerdo con las especificaciones de Fetch API.
Sintaxis: 
 

httpDo( path, [method], [datatype], [data], [callback], [errorCallback] )

O 
 

httpDo( path, options, [callback], [errorCallback] )

Parámetros: Esta función acepta siete 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.
• método: es una string que denota el método para la solicitud HTTP. Puede tener los valores «GET», «POST» o «PUT». El valor predeterminado es «OBTENER». Es un parámetro opcional.
• datatype: Es una string que especifica el tipo de datos que se recibirán. Puede tener los valores de «json», «jsonp», «xml» o «texto». 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.
• opciones: es un objeto que especifica las opciones de solicitud, como en la referencia de Fetch API .

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.
El siguiente ejemplo ilustra la función httpDo() en p5.js:
Ejemplo 1: 
 

function setup() {
  createCanvas(550, 300);
  textSize(18);
 
  text("Click on the button below to send a GET "
           + "or POST request.", 20, 40);
 
  getBtn = createButton("GET Request");
  getBtn.position(30, 60);
  getBtn.mouseClicked(getRequest);
 
  postBtn = createButton("POST Request");
  postBtn.position(30, 90);
  postBtn.mouseClicked(postRequest);
}
 
function getRequest() {
  clear();
 
  // Get a random user from the test api
  let api_url =
    'https://reqres.in/api/users/' + int(random(1, 10));
 
  httpDo(api_url, "GET", "json", false, function (response) {
 
    text("Data fetched from API", 20, 140);
 
    text("The First Name in the data is: "
                        + response.data.first_name, 20, 180);
    text("The Last Name in the data is: "
                         + response.data.last_name, 20, 200);
    text("The Email in the data is: "
                             + response.data.email, 20, 220);
  });
  text("Click on the button below to send a "
           + "GET or POST request.", 20, 40);
}
 
function postRequest() {
  clear();
 
  // Do a POST request to the test API
  let api_url = 'https://reqres.in/api/users';
 
  // Example POST data
  let postData = { id: 10, name: "Mark", email: "mark@gfg.com" };
 
  httpDo(api_url, "POST", "json", postData, function (response) {
    text("Data returned from API", 20, 140);
 
    text("The ID in the data is: " + response.id, 20, 180);
    text("The Name in the data is: " + response.name, 20, 200);
    text("The Email in the data is: " + response.email, 20, 220);
  });
  text("Click on the button below to send a "
           + "GET or POST request.", 20, 40);
}

Producción: 
 

Ejemplo 2:
 

function setup() {
  createCanvas(550, 300);
  textSize(18);
 
  text("Click on the button below to send a PUT request.", 20, 40);
 
  getBtn = createButton("PUT Request");
  getBtn.position(30, 60);
  getBtn.mouseClicked(putRequest);
}
 
function putRequest() {
 
  let putData = { name: "Dan", email: "dan@gfg.com" };
 
  // Get a random user from the test api
  let api_url =
    'https://reqres.in/api/users/' + int(random(1, 10));
 
  httpDo(api_url, "PUT", "json", putData, function (response) {
    text("Data returned from API", 20, 140);
     
    text("The updated name is: " + response.name, 20, 180);
    text("The updated email is: " + response.email, 20, 200);
    text("Data is updated at: " + response.updatedAt, 20, 220);
  });
}

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/httpDo