p5.js | httpGet()函数

p5.js 中的httpGet()函数用于执行 HTTP GET 请求。返回的数据类型由 p5 根据 URL 自动猜测，如果未指定。
数据可以在 preload()函数中加载，以便可以在程序中立即访问。
句法：

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

或者

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

或者

httpGet( path, callback, [errorCallback] )

参数：此函数接受五个参数，如上所述和如下所述。

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

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

javascript

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);
}

输出：

示例 2：

javascript

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);
}

输出：

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