Ajax и рекурсия

[kuliev]

Доброго времени суток.

function getOption(id = null){

      let option = '';
      $.ajax(
      {
        url: './ajax.php',
        type: 'post',
        dataType: 'json',
        data: {
          id: id
        },
        success: function(data){
          if(data.has_next === true){
            getOption(data.result[data.result.length - 1].id)
            
            for(i = 0; i < data.result.length; i++){
              option += '<option value="' + data.result[i].id + '">' + data.result[i].title + '</option>';
            }

          } else {
            for(i = 0; i < data.result.length; i++){
              option += '<option value="' + data.result[i].id + '">' + data.result[i].title + '</option>';
            }
          }
        }
      });
  }

Вот кусок рекурсивной функции, она вызывает саму себя до тех пор пока data.has_next === true. Отправляя запрос на сервер - запрашиваем опции для выпадающего списка, сервер в свою очередь отдает списки частями (по сто штук в списке, и если есть продолжение то сервер возвращает has_next = true)

Так вот, если смотреть в консоле, то данные приходят в ответ на запрос. Вопрос в том как получить эти данные если я вызываю данную функцию из тела другой функции, а возвратить полученные данные из рекурсии не могу.

[voraa]

Использовать асинхронное программирование (с Promise, async await)
Как то так это записать можно

async function getOption(id = null){
	function getPart (id) {
		return new Promise (res => {			
			$.ajax(
			{
				url: './ajax.php',
				type: 'post',
				dataType: 'json',
				data: {
				  id: id
				},
				success: function(data){
					let option = '';
					for(i = 0; i < data.result.length; i++){
						option += '<option value="' + data.result[i].id + '">' + data.result[i].title + '</option>';
					}
					res ({next:data.has_next, option, endsId: data.result[data.result.length - 1]?.id}) ;
				}
			});
		})
	}
	
    let option = '';
    let endsId = id;
	do {
		const res = await getPart(endsId);
		option += res.option;
		endsId = res.endsId;
	} while (res.next);
	
	return option;
}

// Вызов из асинхронной функции

const options = await getOption ();
	// тут обработка результата
	
// Вызов из обычной функции

getOption().then (options => {
	// тут обработка результата
});

[kuliev]

Благодарю за ответ. Сам вчера весь день штудировал про Promise, но что-то толком у меня не получилось.

Взял Ваш код, немного поправил и все получилось. Спасибо!

Для тех кому вдруг понадобиться такая штука...

async function getOption(id = null){
    function getPart (id) {
      return new Promise (promise => {
        $.ajax(
        {
          url: './ajax.php',
          type: 'post',
          dataType: 'json',
          data: {
            id: id
          },
          success: function(data){
            let option = '';
            
            for(i = 0; i < data.result.length; i++){
              option += '<option value="' + data.result[i].id + '">' + data.result[i].value + '</option>';
            }
            
            promise ({
              next:data.has_next, 
              option, 
              endsId: data.result[data.result.length - 1]?.id
            }) ;
          }
        });
      })
    }

    let start = true;
    let option = '';
    let endsId = id;
    
    while (start){
      const promise = await getPart(endsId);
      option += promise.option;
      endsId = promise.endsId;
      start = promise.next;
    }

    return option;
  }

  // Вызов из асинхронной функции
  const options = (async () => {await getOption()});
  // тут обработка результата

  // Вызов из обычной функции
  getOption().then (options => {
    console.log(options)
  });