如何在 P5js 库上使用 API？答案

【问题标题】：How do i use an API on the P5js library?如何在 P5js 库上使用 API？
【发布时间】：2021-11-13 05:57:38
【问题描述】：

我一直在研究 p5js 库，我正在尝试使用 API 来访问我的项目的天气数据，但编辑器不断抛出错误，我不知道为什么这是我的代码：

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

function gotData(data){
  print(data);  
}

function draw(){
}

谁能帮忙指出我的代码有什么问题？

【问题讨论】：

请查看您的帖子，然后编辑它以使用proper markup。但除此之外，还请include all the details：哪个编辑？什么错误？您在调试方面已经尝试过什么？请记住，Stackoverflow 不是一个通用的帮助论坛，您应该完整地描述问题，以便其他人可以帮助您解决问题，和以便未来的访问者可以从您的帖子中确定这是否是他们的问题也一样，所以无论得到的答案是否会对他们有所帮助。

标签： javascript api p5.js weather

【解决方案1】：

您应该发布您遇到的错误。（由于您已经在使用 p5.js 编辑器，您还可以分享一个链接，以便其他人更容易复制您的问题）

我刚刚在 p5 网络编辑器中尝试了您的代码，但在浏览器的 JS 控制台中出现此错误：

p5.js:84555 Mixed Content: The page at 'https://editor.p5js.org/' was loaded over HTTPS, but requested an insecure resource 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=e7402cc176aacd446829a856f2723b57&units=metric'. This request has been blocked; the content must be served over HTTPS.

有时错误可能很隐晦，但在这种情况下它非常简单：

p5.js 是从 HTTPS 域 (https://editor.p5js.org) 加载的
天气 API 是通过 HTTP(unsecure) (http://api.openweathermap.org/...etc.) 访问的
理想情况下，您应该通过 HTTPS 加载（天气 API 支持 HTTPS）。

这使得解决方案变得像添加单个“s”一样简单:) （访问 Weather API 时从 http:// 到 https://）

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

function gotData(data){
  print(data);  
}

function draw(){
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"&gt;&lt;/script&gt;

【讨论】：