p5.js | httpDo()函数

p5.js是一款基于processing.js的Javascript库，用于设计交互式图形和动画，通过httpDo()函数，可以在p5.js中使用http请求。本文将带你深入了解httpDo()函数的用法和实际应用。

httpDo()函数的语法格式

httpDo(url, method, data, callback, errorCallback);

• url: 请求的url地址
• method：请求的方式，默认为GET，也可以是POST和PUT等
• data：请求的数据，如表单数据或json数据等
• callback：请求成功时的回调函数
• errorCallback：请求失败时的回调函数

示例代码

下面是一个使用httpDo()函数的例子，实现了通过ajax请求获取Github用户信息并在网页上展示。

let user;

function preload() {
  const url = 'https://api.github.com/users/srtian';
  httpDo(url, 'GET', '', function(response) {
    user = JSON.parse(response);
  });
}

function setup() {
  createCanvas(400, 400);
  textSize(25);
  textAlign(CENTER);
}

function draw() {
  if (user) {
    background(200);
    text('Name: ' + user.name, width/2, height/2-20);
    text('Login: ' + user.login, width/2, height/2+20);
    text('Followers: ' + user.followers, width/2, height/2+60);
  } else {
    text('Loading...', width/2, height/2);
  }
}

在上面的示例代码中，我们使用了httpDo()函数发送了一个GET请求获取了Github用户srtian的信息，然后通过回调函数将返回的数据解析成JSON格式的数据，并保存到全局变量user中，最后在draw()函数中根据user变量的值，渲染了用户的几个信息。

实际应用 - 获取天气信息

我们可以使用httpDo()函数调用第三方API，从而实现获取天气信息的功能。这里我们以OpenWeatherMap API为例，该API提供免费获取世界各地天气数据的服务。

我们需要先在OpenWeatherMap官网注册账号，然后获取API Key。然后我们就可以使用以下代码获取当前城市的天气信息了。

const apiKey = 'xxxxxxxxxxxxxxx'; // 这里填写你的API Key
const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
let weatherData;

function preload() {
  httpDo(weatherUrl, 'GET', '', function(response) {
    weatherData = JSON.parse(response);
  });
}

function setup() {
  createCanvas(400, 400);
  textSize(25);
  textAlign(CENTER);
}

function draw() {
  if (weatherData) {
    background(200);
    text(`城市：${weatherData.name}`, width/2, height/2-60);
    text(`天气：${weatherData.weather[0].description}`, width/2, height/2);
    text(`气温：${kelvinToCelsius(weatherData.main.temp)} °C`, width/2, height/2+60);
  } else {
    text('Loading...', width/2, height/2);
  }
}

function kelvinToCelsius(k) {
  return Math.round(k - 273.15);
}

在上面的代码中，我们通过httpDo()函数向OpenWeatherMap API发送了一个GET请求，获取了当前城市的天气信息，然后解析JSON数据保存到weatherData变量中，并在画布上展示了城市名、天气情况和气温信息，并提供了一个用于将开尔文温度转换为摄氏温度的函数。

现在，你已经熟悉了httpDo()函数，你可以通过它来获取各种形式的数据，处理数据并应用在你的交互式图形与动画当中。