Hi.
Sorry for not getting the full code first.
This is part of a performance app that processes data from the server into a canvas.
I use async, promise and await to control the flow of functions.
But It doesn't work in the order I want.
CanvasClass is a module object. This is chosen for private data.
In this object, the
preparedrawing function checks the data, returns it if there is data, and makes a request to the server if not.
As expected, until the request is sent to the server and the data is received, the task tries to lock in await, but that doesn't work.
Therefore, an error occurs when data that has not yet come from the server is passed.
In the code below, I try to promise and await twice, but it doesn't work.
The code looks complicated
Please focus on the bold font.
I want the following order, ( results of console.log())
'async'
'loadStream'
'f 1'
(6)[{...}, {...}, {...}, {...}, {...}, {...}] <== data from server
'f 2'
'f 3'
'f 4'
But result is
'async'
'loadStream'
'f 1'
'f 2'
'f 3'
'f 4'
(6)[{...}, {...}, {...}, {...}, {...}, {...}] <== data from server
What I have tried:
let abortController = null;
const load_stream = async (data) => {
if(abortController){ abortController.abort();}
const url = new URL ("http://192.168.10.21:1080/play");
if(data){
Object.entries(data).forEach(entry => {
const [key, value] = entry;
url.searchParams.set(key, value);
});
}
abortController = new AbortController();
try{
const response = await fetch(url, {signal: abortController.signal });
if(!response.ok){
console.error(response.status, response.statusText);
return [];
}
const result = await response.json();
return result;
}catch(e){
console.error(e);
return [];
}
};
var canvasClass = function(){
......
.......
return {
loadStream: async function(_serial_id, _content_id){
console.log('loadStream');
const jsonData = { 'pID': _serial_id, 'cID': _content_id };
const result = await load_stream( jsonData );
if( imageData.length > 0 ){
imageData = [];
}
imageData = result.responseResultData;
console.log(imageData);
console.log('func');
this.setPageData();
return false;
},
pageLoading: async (me) => {
me.loadStream(cont.id, cont.content_id);
return true;
},
prepareDrawing: function( _page ){
const me = this;
var i = 0;
let left_width = '0';
for( const item of canvasMap ){
if(item === undefined)
return false;
do{
this.insertCanvasMap({
item: item,
page: _page++,
num: i++,
loading: async (cnt) => {
if( pageData[cnt] === undefined ){
console.log('async');
let res = await new Promise((resolve, reject) => {
let rt = me.pageLoading(me);
console.log('f 1');
resolve(rt);
})
return res;
}else{
return true;
}
}
} );
}while( i < 2 );
}
},
insertCanvasMap: async ( _args ) => {
let res = await new Promise((resolve, reject) => {
let result = _args['loading']( _args['page'] );
resolve(result);
});
if( res !== ''){
console.log(res+' f 2');
_args['item'].display({
image: pageData[_args['page']],
subtitle: subtext.page[_args['page']]
},
{
display: function(_canvas){
_canvas.drawImage();
console.log('f 3');
},
getPage: function(_page_num){
page_set[_args['num']] = _page_num;
console.log('f 4');
}
})
}
},
}
}