p5.js 2.0 Beta 版本中异步加载函数的 await 问题解析

在 p5.js 2.0 Beta 版本中，开发者在使用异步加载函数时可能会遇到一个关键问题：await 操作符无法正确等待加载完成。这个问题主要影响 loadStrings、loadShader 和 loadBytes 等异步加载函数，导致数据在加载完成前就被返回。

问题现象

当开发者尝试使用 await 等待这些加载函数时，函数会提前返回空值（如空数组），而不是等待数据完全加载。例如：

let myData;

async function setup() {
  myData = await loadStrings('test.txt');  
  print(myData); // 这里会打印空数组 []
}

有趣的是，如果使用传统的回调函数方式，数据能够正确加载：

function gotData(d) {
  myData = d;
  print(myData); // 这里会正确打印文件内容
}

技术分析

这个问题源于 2.0.0-beta.3 版本的一个部署错误。在正确的实现中，异步加载函数应该：

1. 当不使用回调函数时，应该返回一个 Promise，await 可以正确等待其解析
2. 当使用回调函数时，应该返回回调函数的结果，以便 await 能够获取到处理后的数据

在 beta.3 版本中，部分加载函数（如 loadStrings）没有正确处理回调函数的返回值，导致 await 无法获取到最终数据。

解决方案

开发者可以采取以下几种方式：

1. 使用 beta.2 版本：这个版本没有此问题
2. 等待 beta.4 版本发布：该版本将修复此问题
3. 正确使用回调函数：如果需要同时使用 await 和回调，确保回调函数返回处理后的数据

function gotData(d) {
  myData = d;
  print(myData);
  return d; // 必须返回数据
}

最佳实践

在 p5.js 2.0 中，推荐以下两种模式之一：

1. 纯 Promise 模式（推荐）：

async function setup() {
  myData = await loadStrings('test.txt');  
  print(myData);
}

2. 纯回调模式：

function setup() {
  loadStrings('test.txt', gotData);  
}

function gotData(d) {
  myData = d;
  print(myData);
}

其他注意事项

1. 部分加载函数的接口在 2.0 版本中有所变化，例如：

   • loadTable 的第二个参数现在是分隔字符
   • loadBytes 现在直接返回数组，而不是包含数组的对象

2. 文档正在更新中，建议开发者参考源代码中的内联文档作为当前最准确的信息来源

3. 对于 loadShader 等 WebGL 相关函数，修复将在后续 beta 版本中发布

这个问题展示了在大型框架升级过程中可能遇到的异步处理兼容性问题，也提醒开发者在测试阶段要特别注意 Promise 和回调函数的交互行为。随着 p5.js 2.0 的正式发布，这些接口将更加稳定和一致。