p5.js | Función httpPost()

La función httpPost() en p5.js se usa para ejecutar una solicitud HTTP POST. p5 adivina automáticamente el tipo de datos devuelto en función de la URL, cuando no se especifica. Los datos devueltos podrían cargarse en la función preload() para que se pueda acceder a ellos inmediatamente en el programa. Sintaxis:

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

O

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

O

httpPost( 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», «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.

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 httpPost() en p5.js:

 Ejemplo 1: 

javascript

function setup() {
  createCanvas(550, 200);
  textSize(18);
  
  text("Click on the button below"+
       " to send a POST request.", 20, 40);
  
  postBtn = createButton("Post Request");
  postBtn.position(30, 60);
  postBtn.mouseClicked(postRequest);
}
  
function postRequest() {
  
  // Do a POST request to the test API
  let api_url = 'https://reqres.in/api/users';
  
  // Example POST data
  let postData = { id: 1, name: "Sam",
                  email: "sam@samcorp.com" };
  
  httpPost(api_url, 'json', postData, function (response) {
    text("Data returned from API", 20, 100);
  
    text("The ID in the data is: "
         + response.id, 20, 140);
    text("The Name in the data is: "
         + response.name, 20, 160);
    text("The Email in the data is: "
         + response.email, 20, 180);
  });
}

Producción:

 post-request-btn 

Ejemplo 2: 

javascript

function setup() {
  createCanvas(550, 200);
  textSize(18);
  
  // Do a POST request to the test API
  let api_url =
      'https://reqres.in/api/users';
  
  let postData = { id: 1, name: "James",
                  email: "james@james.j.com" };
  
  httpPost(api_url, 'json', postData,
           onSuccessfulFetch, onErrorFetch);
}
  
function onSuccessfulFetch(response) {
  text("Data returned from API", 20, 60);
  
  text("The ID in the data is: "
       + response.id, 20, 100);
  text("The Name in the data is: "
       + response.name, 20, 120);
  text("The Email in the data is: "
       + response.email, 20, 140);
}
  
function onErrorFetch() {
  text("There was an error doing"+
       " the request.", 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/reference/#/p5/httpPost

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *