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”将返回类型化数组。如果未指定参数，则默认为‘text’。它是一个可选参数。
data:它是一个对象或布尔值，用于指定随请求传递的参数数据。
callback:当该函数成功执行时，将调用该函数。该函数的第一个参数是从API返回的数据。它是一个可选参数。
errorCallback:如果执行该函数时有任何错误，则调用该函数。此函数的第一个参数是错误响应。它是一个可选参数。

返回值：它返回一个承诺，当操作成功完成时，可以用数据来解决该承诺，或者在发生错误时将其拒绝。

以下示例说明了p5.js中的httpGet()函数：

范例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 recieved 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); 
}

输出：
preload-get

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

输出：
success-error-callback

在线编辑： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/httpGet

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | httpGet() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。