Как вывести переменную из jQuery в «глобальную среду»?

Question

[Zorgios]

Таким образом можно получить содержимое файла:

$.get( "file.txt", function( data ) {
  var rezText = data;
  console.log( rezText );
});

Но как вытащить этот "rezText" для дальнейших работ, уже вне jQuery?

Comments

[Tim]

можно присвоить в глобальный объект window, но лучше использовать колбеки иначе может сломаться

[Вадим]

Кажется мне что Вы хотите использовать асинхронный код при синхронном подходе. У Вас тут несколько вариантов:\
1) устаревший, но по прежнему рабочий и всем понятный - использовать коллбэк в success в параметрах запроса.
2) Современный(максимальная совместимость и кроссбраузерность), но код не такой как при синхронном подходе - использовать цепочки промисов. Запрос1.then(обработчик1)
3) Максимально современной - использовать async\await конструкции.

Answer 1

[Сергей Соколов]

Тут как в фильмах про путешествия во времени, важно не где, а когда! )

Вот внутри в коллбеке, когда-то много позже загрузки страницы, наконец, появится ответ с содержимым файла.

Ну, закинете вы его в глобальную область видимости:

$.get( "file.txt", function( data ) {
  window.fileTxtContent = data;
});

и теперь уже станет «можно» и глобально с ним работать. Но на этот момент весь «обычный» код уже давно отработал.

Можно во внешнем коде создать функцию для работы с полученным содержимым:

function workWithFileTxt(content) {
  console.log("Я свободен от jQuery! А вот текст из файла: ", content);
}

$.get( "file.txt", workWithFileTxt);

Answer 2

[Надим]

Используйте await:

rezText = await $.get("file.txt");
console.log(rezText);

Но помните, что если вы будете вызывать это где-то внутри функции, то такая функция должна иметь приставку async. Подробнее про async / await вы можете узнать погуглив про промисы. Без использования промисов, можно так:

$.get("file.txt", function(data) {
  window.rezText = data;
  console.log(rezText);
});

Переменная rezText будет записана в глобальную область видимости через window.

Comments

[Tim]

$.get разве возвращает промис?

[Надим]

Tim, начиная с какой-то там версии jQuery.ajax() из под коробки умеет в промисы, это относится в том числе и к функциям .get и .post()

Откройте сайт: https://jquery.com

И в консоли попробуйте выполнить:
await $.get('https://jquery.com/download/');

[Tim]

Надим Закиров, в консоли работает await и видимо там какая то обертка реализована, но это особенности devtools, а не js. функция $.get не возвращает промис

[Надим]

Tim, уж поверь, в коде (а не консоли) await в связке c jQuery.ajax() тоже прекрасно себя чувствует. По крайней мере в своих проектах я это активно использую и уже написаны мегатонны кода, все отлично работает.

Хотя чего это я вам доказываю, в документации черному по белому написана поддержка промисов:

$.ajax() начиная с jQuery 1.5, реализуют интерфейс Promise, предоставляя им все свойства, методы и поведение Promise.

[Tim]

Надим Закиров, так в ссылке которую вы скинули написано, что промисы в колбеках реализованы, а для оператора await нужен промис

[Надим]

Tim, честно, я не знаю как они это сделали, но это работает и я реально уже в куче своего кода использовал эту особенность $.ajax()

Да и в принципе народ вовсю это использует:
https://dev.to/ptasker/using-async-await-with-jque...

Мне в принципе не принципиально как разрабы jQuery() промис запихнули в объект, возможно поигрались как-то с прототипами, для меня главное, что работает и существенно облегчает жизнь, когда пишу расширения.

[Tim]

Надим Закиров, Там скорее какая то обертка. Вот ваш код на локалке использовал и оно выдает ошибку. Ошибка логична, но если я ставлю локальный url, то оно "работает" и я предполагаю, что не правильно

сам код

(async () => {
      await $.ajax({url: "https://jquery.com/download/",dataType: "jsonp",success: function (data) {console.log(data);}});
})();

[Надим]

Tim, странно вы тестируйте конечно. Посмотрите мое демо:
https://nadim.work/primer.html
Зайдите и откройте консоль + посмотрите функцию test()
Пока ajax не грузанет видео, код ниже не отработает.

[Tim]

Надим Закиров, да я про это и писал выше. попробуйте получить данные с другого домена. Чисто уже любопытно стало

[Надим]

Tim, подкорректировал пример, заходите и смотрите - с другого домена тоже все норм)

Тут главное, чтобы целевой домен корректный заголовок access-control-allow-origin отдавал, без этого заголовка конечно же ничего не будет работать - это особенность кросс-доменных запросов.

[Tim]

Надим Закиров , допустим. Как оно работает? Если написать await 2, то она вернет 2 и логично, что там нет промиса. Что в случае с аяксом заставляет ждать?

Ключевое слово await заставит интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится. После чего оно вернёт его результат, и выполнение кода продолжится.

[Надим]

Tim, да фиг его знает, но я склоняюсь к тому, что возвращаемый объект имеет нестандартный прототип, там и вся магия прописана.

[Zorgios]

rezText = await $.get("file.txt");
console.log(rezText);

Выдает ошибку:

Uncaught SyntaxError: await is only valid in async function

[Надим]

Zorgios, оберните все это в функцию, к самой функции добавьте приставку async и только затем вызывайте получившуюся функцию.

[Zorgios]

Надим Закиров, а как в итоге достать конкретно результат промиса? В моём случае, '12345678'


Прошу прощения за глупые вопросы. Не сталкивался на практике с ними просто.

[Надим]

Zorgios, чтобы получить результат промиса используется приставка await. Либо еще можно вызывать then

Я не понимаю, что у вас там может не получится.