[p5.js 2.0 Beta Bug Report]: await not working for async load functions

[sidwellr]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.0-beta.3

Web browser and version

Brave 1.75.178, Chrome 133.0.6943.142, Firefox 135.0

Operating system

Windows 10

Steps to reproduce this

Many of the p5.js load functions don't work correctly with await; they seem to return prematurely. I use loadStrings in the snippet below, but have seen the same problem in loadShader and loadBytes; it is probably an issue with others. In the code below, I use "await loadStrings" to load data from a text file, which should wait until the data is loaded to continue. But printing it immediately prints an empty array. The successCallback works fine; the correct data is printed in the callback function. (But the problem arises even if no callback function is given.)

Steps:

1. Call await loadStrings (or loadShader or loadBytes) in the async setup function
2. The await should make the function wait until the data is available, but the data is empty

Snippet:

https://editor.p5js.org/rsidwell/sketches/aVQd6eoOG

let myData;

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

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

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[dhowe]

Hi @sidwellr - I think the pattern (and perhaps this needs to be documented better) here is to use either async/await with a return value or the callback:

let myData;

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

or

let myData;

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

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

[sidwellr]

I agree. I only used both to show that callback works but await doesn't. If you leave off the callback (your first snippet), it will print '[]' instead of the lines in test.txt.

[dhowe]

Ah I see - I can confirm this in global mode in the editor (see here) using v2.0.0-beta.3.

Though in instance mode I see the properly loaded string.

[limzykenneth]

Yes, for async/await you should normally not use the callbacks since they serve similar purpose. However, if you want to use callbacks still, you need to return the value of the loaded data in the callback:

let myData;

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

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

This is considered more of an advanced use as the callback can be use as a filter to dynamically modify the loaded data before it is resolved into the promise. In 1.x, there are similar behavior as well in that if the callback is provided the function will not return a value.

We are still in the middle of updating the documentation so this is not fully reflected yet but the behavior is intended..

[sidwellr]

@limzykenneth Thanks. I was wondering about that. I was comparing the code for loadImage (which works) and loadStrings (which doesn't), and notice that loadImage returns the result of successCallback if it is defined, but loadStrings doesn't. I doubt that's the problem with the other load functions, but someone should probably verify that all of the load function return the result of successCallback so that the advanced use you describe will work.

[limzykenneth]

@sidwellr Yeah that is a bug, I'll check there is a return for all the loading functions. Thanks.

[limzykenneth]

@sidwellr 2.0.0-beta.3 has a deployment error making it incorrect, I'm deploying a new version. Can you for now try 2.0.0-beta.2 or wait for a bit until 2.0.0-beta.4 is available? I'll be pulling beta 3 as soon as beta 4 is available as it is incorrect.

[sidwellr]

In beta 2, loadStrings works fine. So does loadTable, but the second param is now the character so the example is wrong. And loadBytes works, but again a change: the return value is just an array, not not an object containing an array. so the documentation is wrong.

I still can't get loadShader to work. Has that interface changed (other than returning a promise instead of a shader)?

[limzykenneth]

I'll test the other loading functions as well, just publishing this update as beta 3 was not published correctly. Will let you know if any problem and push any fixes.

So does loadTable, but the second param is now the character so the example is wrong. And loadBytes works, but again a change: the return value is just an array, not not an object containing an array. so the documentation is wrong.

These has changed accordingly and we are still in the process of updating the documentation.

[limzykenneth]

Issues should be fixed with #7594.

The documentation is updated in the inline reference, do note that the reference on the website p5js.org will not be updated on release of 2.0 but be hosted separately to support a smooth transition, which means for now (until we finished with the beta site containing 2.0 reference) the inline reference contained alongside the source is the source of truth.