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”。默認值為“GET”。它是一個可選參數。
datatype:它是一個字符串，用於指定將要接收的數據類型。它可以具有“json”，“jsonp”，“xml”或“text”的值。如果未指定參數，則默認為‘text’。它是一個可選參數。
data:它是一個對象或布爾值，用於指定隨請求傳遞的參數數據。
callback:當該函數成功執行時，將調用該函數。該函數的第一個參數是從API返回的數據。它是一個可選參數。
errorCallback:如果執行該函數時有任何錯誤，則調用該函數。此函數的第一個參數是錯誤響應。它是一個可選參數。
options:與Fetch API參考中一樣，它是一個指定請求選項的對象。

返回值：它返回一個承諾，當操作成功完成時，可以用數據來解決該承諾，或者在發生錯誤時將其拒絕。

以下示例說明了p5.js中的httpDo()函數：

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

輸出：

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

輸出：

在線編輯： https://editor.p5js.org/

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

參考： https://p5js.org/reference/#/p5/httpDo

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | httpDo() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。