Как асинхронный код сделать пошаговым?

Question

[sortfact333]

Я хочу что бы у меня было удобная возможность выбрать что за чем идет в моем three.js коде

const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

function loadloader_1(){
	loader_1.load( './models/amf/rook.amf', function ( amfobject ) {
		scene.add( amfobject );
		console.log('on loader GCode')
	}, onProgress , onError);
	console.log('off loader GCode')
}
function loadloader_2(){
	loader_2.load( 'models/gcode/benchy.gcode', function ( object ) {
		//object.position.set( - 100, - 20, 100 );
		scene.add( object );
		console.log('on loader AMF')
	}, onProgress , onError);
	console.log('off loader AMF')
}


console.log('Start load')
if (ask_1){
	console.log('Start load 1')
	loadloader_1()
	console.log('END  load 1')
}
if (ask_2){
	console.log('Start load 2')
	loadloader_2()
	console.log('END  load 2')
}
console.log('END load')

callback не подходит так как он ужасно выглядит и когда очередности слишком много то он становится нечитабельным

const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

console.log('Start load')



loader_1.load( '/models/amf/rook.amf', function ( model1 ) {
	if (ask_1){
		scene.add( model1 );
	}
	console.log('End load for model 1 ')
	if (ask_2){
		loader_2.load( 'models/gcode/benchy.gcode', function ( model2 ) {
			model2 .position.set( - 100, - 20, 100 );
			scene.add( model2 );
			console.log('End load for model 2 ')
		}, onProgress , onError);
	}
}, onProgress , onError);

console.log('END load')

await Я не понял как его прявильно применять

console.log('Start load')
const loader = new GCodeLoader();
loader.load( 'models/gcode/benchy.gcode', function ( object ) {
	object.position.set( - 100, - 20, 100 );
	scene.add( object );
}, onProgress , onError);
let result = await loader;
console.log('End load for mode l ')

Promise тоже самое что и await

const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

function loadloader_1(text) {
	if (ask_1){
		const loader = new AMFLoader();
		loader_1.load( './models/amf/rook.amf', function ( amfobject ) {
			scene.add( amfobject );
			console.log('on loader GCode' + text)
		}, onProgress , onError);
		console.log('off loader GCode' + text)
	}
}
function loadloader_2(text) {
	if (ask_2){
		loader_2.load( 'models/gcode/benchy.gcode', function ( object ) {
			//object.position.set( - 100, - 20, 100 );
			scene.add( object );
			console.log('on loader AMF' + text)
		}, onProgress , onError);
		console.log('off loader AMF' + text)
	}
}

function loadScript(src) {
	return new Promise(function(resolve, reject) {
		let script = loadloader_1(src);
	});
}

loadScript("model 1")
	.then(function(script) {
		return loadScript("model 2");
	})
	.then(function(script) {
		return loadScript("model 3");
	})
	.then(function(script) {
		console.log('END')
});

Как мне удобно и просто менять очередность выполнения кода?

Answer 1

[Karpion]

Я ничего не понял. Похоже, Вы зачем-то пытаетесь асинхронно делать то, что нужно делать последовательно.

Answer 2

[Aetae]

Эти классы расширяют THREE.Loader, а у него есть метод loadAsync.
Т.е. в теории, всё, что тебе надо делать, это:

const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

async function main() {
  console.log('Start load')

  if (ask_1){
    const amfobject = await loader_1.loadAsync( './models/amf/rook.amf');
    scene.add( amfobject );
    console.log('on loader AMF', amfobject);
  }

  if (ask_2){
    const object = await loader_2.loadAsync( 'models/gcode/benchy.gcode');
    scene.add( object );
    console.log('on loader GCode', object);
  }

  console.log('END load')
}

main();

Сам не проверял, но по документации должно работать.)

P.S. Но вообще, если собираешься и дальше работать с js - тебе надо изучить асинхронность. То, что ты понаписал - откровенная чушь, показывающая, что ты в принципе не понимаешь, как оно работает. Просто открой учебник и перечитывай до просветления.
Там нет никакой магии, которая волшебным образом заставит твой код работать. Promise - это просто хитрая надстройка надо коллбэками(полностью реализуемая на обычном js), позволяющая развернуть их порядок назначения - не более. async-await - просто синтаксический сахар над Promise, делающий оные менее многословными, но не меняющий механизма.

Comments

[sortfact333]

Эти классы расширяют THREE.Loader, а у него есть метод loadAsync.

Возможно это и работает на некоторых Loader но. Во многих из них свой собственый стиль написания например в md2, mmd и obj есть дополнительные опций такие как материал, mtl, анимация, скелет, физика и так далее. Есть также и другие классы такие как export. render. material.

надо изучить асинхронность. То, что ты понаписал - откровенная чушь

Конечно это чушь потому что я запутался в том как мне надо правильно это написать. Ведь единственое что у меня работает это пирамида калбэков.

Просто открой учебник и перечитывай до просветления

Эту чушь я написал как раз после того как пытался понять этот учебник.
Ведь для избовления от калбэков говорится об использований промисов.
А как адоптировать его в three код с его класами я не знаю

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = src;

    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Ошибка загрузки скрипта ${src}`));

    document.head.append(script);
  });
}

loadScript("/article/promise-chaining/one.js")
  .then(function(script) {
    return loadScript("/article/promise-chaining/two.js");
  })
  .then(function(script) {
    return loadScript("/article/promise-chaining/three.js");
  })
  .then(function(script) {
    // вызовем функции, объявленные в загружаемых скриптах,
    // чтобы показать, что они действительно загрузились
    one();
    two();
    three();
  });

[Aetae]

sortfact333, как я и написал - читай учебник до просветления.

Ты разобрался с коллбэками? Переходи к промисам:
На пальцах:
Есть функция foo(значение, коллбэк, колбэкПриОшибке).
Делаем из неё функцию возвращающую промис:

function bar(значение) {
  return new Promise((resolve, reject) => foo(значение, resolve, reject))
}

Получаем промис:
промис = bar(значение)
Пробрасываем колбэки:
промис.then(resolve, reject)
Если присмотреться, то видно, что промис по сути просто пробрасывает через then переданные коллбэки. Промис - это просто объект для хранения, пробрасывания и выстраивания в цепочку колбэков. Не более и не менее.

Когда поймёшь промисы - переходи к async await - там тоже ничего сложного.
Когда поймёшь всё - для тебя не будет проблемой преобразовать любой класс как тебе нужно за пару строк.