p5.js | httpDo()函数

p5.js 中的httpDo()函数用于执行 HTTP 请求。可以将 HTTP 请求的类型指定为参数，默认为 HTTP 请求。返回的数据类型由 p5 根据 URL 自动猜测，如果未指定。 options 参数可用于根据 Fetch API 规范指定高级属性。
句法：

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

或者

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

参数：此函数接受上面提到的七个参数，如下所述：

• path：它是一个字符串，表示要加载的 URL 或文件的路径。
• method：它是一个字符串，表示 HTTP 请求的方法。它可以具有值“GET”、“POST”或“PUT”。默认值为“获取”。它是一个可选参数。
• datatype：它是一个字符串，指定将接收的数据类型。它可以具有“json”、“jsonp”、“xml”或“text”的值。如果没有指定参数，它将默认为“文本”。它是一个可选参数。
• data：它是一个Object或一个布尔值，指定随请求传递的参数数据。
• callback：该函数执行成功时调用的函数。此函数的第一个参数是从 API 返回的数据。它是一个可选参数。
• errorCallback：这是一个函数，如果执行该函数有任何错误，则调用该函数。此函数的第一个参数是错误响应。它是一个可选参数。
• options：它是一个指定请求选项的对象，如 Fetch API 参考中所示。

返回值：它返回一个promise，可以在操作成功完成时用数据解决，或者在发生错误时被拒绝。
下面的示例说明了 p5.js 中的httpDo()函数：
示例 1：

javascript

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: "[e-mail]" };
 
  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);
}

输出：

示例 2：

javascript

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: "[e-mail]" };
 
  // 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);
  });
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5/httpDo