Как выполнить код последовательно?

Question

[Us59]

function SubmitData (data) {
	// Проверка включена ли grecaptcha в настройках
	if ($('#grecaptcha').length > 0) {
        $.getScript('https://www.google.com/recaptcha/api.js?render=SITEKEY', function() {
            grecaptcha.ready(function() {
		grecaptcha.execute('SITEKEY', {action: '123'}).then(function(token) {
			console.log('111');
		});
            });
        });
	}
	console.log('222');

	$.ajax({
        type: "POST",
        url: address,
        data: $(formId).serialize(),
        contentType: "application/x-www-form-urlencoded",
        dataType: "text",
        success: function (data) {
        }
    });
}

При выполнении функции я вижу в Console сначала вывод 222, а спустя время 111.

Как исправить? Требуется, если выполняется условие $('#grecaptcha').length > 0, чтобы выполнение $.ajax начиналось только после выполнения grecaptcha.execute

Answer 1

[StiflerProger]

async function SubmitData(data) {
  let captchaToken;

  // Проверка включена ли grecaptcha в настройках
  if ($('#grecaptcha').length > 0) {
    captchaToken = await getCaptchaToken({action: '123'});
  }
  
  console.log(captchaToken);

  const response = await postForm(address, formId);

  console.log(response);
}

function postForm(sendTo, formId) {
  return new Promise(res => {
    $.ajax({
      type: "POST",
      url: sendTo,
      data: $(formId).serialize(),
      contentType: "application/x-www-form-urlencoded",
      dataType: "text",
      success: (data) => {
        return res(data);
      }
    });
  })

}

function getCaptchaToken(opts) {
  const SITE_KEY = 'SITEKEY';

  return new Promise((res) => {
    $.getScript('https://www.google.com/recaptcha/api.js?render=' + SITE_KEY, () => {
      grecaptcha
        .ready(() => {
          grecaptcha
            .execute(SITE_KEY, opts)
            .then((token) => {
              return res(token);
            });
        });
    });
  })
}

Answer 2

[Василий Банников]

1. Перестань jquery использовать
2. await

Ну или продолжай цепочку коллбэков

function SubmitData (data) {
	// Проверка включена ли grecaptcha в настройках
	if ($('#grecaptcha').length > 0) {
        $.getScript('https://www.google.com/recaptcha/api.js?render=SITEKEY', function() {
            grecaptcha.ready(function() {
		grecaptcha.execute('SITEKEY', {action: '123'}).then(function(token) {
			console.log('111');
		}).then(()=> {
	$.ajax({
        type: "POST",
        url: address,
        data: $(formId).serialize(),
        contentType: "application/x-www-form-urlencoded",
        dataType: "text",
        success: function (data) {
        }
    });
});
            });
        });
	}
	console.log('222');
}

Comments

[Us59]

Василий Банников проблема в том, что придется 2 раза вставлять $.ajax одинаковый при такой конструкции

[Василий Банников]

Us59, зачем 2 раза одинаковый $.ajax? Почему придётся?
Ааа, понял.
Ну тогда в функцию выноси.

Или смотри первую половину моего ответа - выкидывай нафиг этот $.ajax и используй fetch. Ты что, по гайдам из 2003 года учился?

[Us59]

Василий Банников, придерживаюсь основных функций текущего проекта, т.к. это доработки проекта, а не написание чего-то с полного 0

[Василий Банников]

Us59, а в чём проблема то заюзать fetch и async/await?
Это же не отдельная библиотека, которая сделает код жирнее, да никакую особенную архитектуру не диктует.

[Us59]

Василий Банников, можете показать пример? Смысл в том, что функция SubmitData вызывается во многих частях проекта, и нужно доработать часть с загрузкой рекапчи именно в самой функции, чтобы не перелопачивать весь проект. Тем временем я пойду изучать fetch в гугле, т.к. не использовал ранее.

[Василий Банников]

Us59, типа так:
Даже без перехода на fetch

async function SubmitData (data) {
	// Проверка включена ли grecaptcha в настройках
	if ($('#grecaptcha').length > 0) {
        await $.getScript('https://www.google.com/recaptcha/api.js?render=SITEKEY', function() {
            grecaptcha.ready(function() {
		grecaptcha.execute('SITEKEY', {action: '123'}).then(function(token) {
			console.log('111');
		});
            });
        });
	}
	console.log('222');

await $.ajax({
        type: "POST",
        url: address,
        data: $(formId).serialize(),
        contentType: "application/x-www-form-urlencoded",
        dataType: "text",
        success: function (data) {
        }
    });
}

[Us59]

Василий Банников, попробовал применить этот код, однако результат такой же, в Console видим вызов 222, и только через время 111.

[Us59]

Василий Банников, разобрался. Вы можете использовать await только тогда, когда ваш ответ возвращает обещание. К сожалению, jQuery ajax не возвращает Promise после завершения.

[Василий Банников]

Us59, какой "этот"?

[Василий Банников]

Us59,

К сожалению, jQuery ajax не возвращает Promise после завершения.

Тогда коллбэки используй, либо уходи с jquery)