如何在P5.js库中使用API？及OpenWeatherMap API调用代码报错排查请求

嘿，我来帮你搞定这两个问题——先解决你代码里的报错，再聊聊P5.js里怎么用API～

首先看你代码里的核心问题：

• URL中的&是HTML的转义字符，在JavaScript字符串里应该直接用普通的&来拼接URL参数。&会被API服务器当成无效参数，导致请求失败，这就是你编辑器报错的主要原因。
• 另外，建议加上错误回调函数，这样能更直观地看到请求失败的具体原因，方便排查问题。

修复后的完整代码：

function setup() {
  createCanvas(400,400);
  // 把HTML转义的&替换成标准的&
  let url = 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=e7402cc176aacd446829a856f2723b57&units=metric';
  // 添加错误回调，方便排查问题
  loadJSON(url, gotData, gotError);
}

function gotData(data){
  print('成功获取数据：', data);
}

function gotError(error) {
  print('请求出错啦：', error);
}

function draw(){
}

搞懂这个流程，以后调用任何API都能得心应手：

• 确认API支持跨域：大部分公开API都支持CORS（跨域资源共享），如果遇到跨域报错，可以看看API是否提供JSONP选项，P5.js的loadJSON会自动处理部分跨域场景。
• 构造正确的请求URL：
  • 参数用&分隔，不要用HTML转义字符（比如&）
  • 确保API密钥、请求参数（比如城市名）正确无误
• 选择合适的P5.js网络函数：
  • loadJSON()：最常用，专门处理JSON格式的API响应
  • httpGet()/httpPost()：更灵活，支持GET/POST等不同请求方式
  • loadXML()：处理XML格式的数据
• 处理响应数据：在成功回调函数里，你可以提取需要的字段（比如天气温度、城市名称），然后在draw()函数里渲染到画布上。
• 添加错误处理：一定要加上错误回调，这样当请求失败时（比如网络问题、API密钥无效），能快速定位问题。

举个进阶例子，获取天气数据后渲染到画布：

let weatherInfo;

function setup() {
  createCanvas(400,400);
  let url = 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=e7402cc176aacd446829a856f2723b57&units=metric';
  loadJSON(url, fetchSuccess, fetchError);
}

function fetchSuccess(data){
  weatherInfo = data;
}

function fetchError(error) {
  print('请求失败原因：', error);
}

function draw(){
  background(245);
  if(weatherInfo){
    textSize(18);
    fill(30);
    text(`城市：${weatherInfo.name}`, 30, 50);
    text(`当前温度：${weatherInfo.main.temp}°C`, 30, 80);
    text(`天气状况：${weatherInfo.weather[0].description}`, 30, 110);
  } else {
    text('正在加载天气数据...', 30, 50);
  }
}

内容的提问来源于stack exchange，提问作者Louis