Как в return получить несколько значений?

Question

[Анастасия]

Здравствуйте. Есть две функции. Одна делает запрос на сервер и возвращает json, а вторая как раз вызывает первую функцию с нужными аргументами. Результат первой (~ajax) функции я хочу обрабатывать во второй, поэтому первая функция должна возвращать просто ответ сервера. Но почему-то в 1-ой функции всё нормально отображается, но когда я делаю return, то вторая функция распознать ничего не может.

// первая (~ajax)
function toCart(e) {
  var req = new XMLHttpRequest();
  ....
  req.onload = function() {
      let res = this.response;
      console.log(res); // {result: ok, count: 3}, а console.log(res.result) вернёт ok
      return res; // {res.result,res.count} - тоже не работает
  }
}
// вторая
function btnClick(e) {
...
  let res = toCart([name, size]);
  console.log(res); // undefined
}

Если же я сделаю в первой функции return res.result, то во второй я его получу (ok), но мне же нужно оба условия.

Что я делаю не так?

Comments

[Mikhail Osher]

Вы неправильно работаете с асинхронщиной в JS. Почитайте главу https://learn.javascript.ru/async

[Анастасия]

Mikhail Osher, хотите сказать, что я ответа не дожидаюсь?

[WbICHA]

Анастасия, так у тебя функция toCart ничего не возвращает. Тут уже вопрос не в асинхронности, а в непонимании как работают функции.

[Анастасия]

WbICHA, так она и ничего не должна возвращать. Это дело десятое. Мне нужно в консоли вывести то, что она получила, а потом уже думать, что он возвращать будет.

[lUser L]

Анастасия,

Мне нужно в консоли вывести то, что она получила, а потом уже думать, что он возвращать будет.

мне кажется или вы противоречите сами себе ?

[Анастасия]

Эмиль 🔥, да, противоречу, потому что функции перепутала. toCart должна возвращать

[Mikhail Osher]

Анастасия, Вы хотите получить и использовать результат до того, как он будет получен.

Так же, хочу посоветовать использовать функцию fetch, вместо создания экземпляров XMLHttpRequest, который уже давно считается устаревшим. Его используют, в основном, когда нужно получать upload progress. Всё остальное делают через fetch.

[Анастасия]

Mellorn, всё ли я правильно делаю?

async function toCart(e){
let response = await fetch('tocart.php', {
	method: 'POST',
	headers: {
	  'Content-Type': 'application/json;charset=utf-8'
	},
	body: JSON.stringify(e)
});

let result = await response.json();
return result;
}

function btnClick(e) {
let res = toCart([name, size]);
  console.log(res);
}

и как достать результат? он находится в [[PromiseResult]]

[WbICHA]

Анастасия,

всё ли я правильно делаю?

В целом, да.

и как достать результат? он находится в [[PromiseResult]]

Наверно также, как достать [[PromiseResult]] из фетча?

[Анастасия]

WbICHA,

Наверно также, как достать [[PromiseResult]] из фетча?

эх... наверное...
Mellorn, изменила.
вот так?

async function toCart(e){
let response = await fetch('tocart.php', {
	method: 'POST',
	headers: {
	  'Content-Type': 'application/json;charset=utf-8'
	},
	body: JSON.stringify(e)
});

let result = await response.json();
return result;
}

let btntoCart = qq(".to-cart");
for (let i = 0, count = btntoCart.length; i < count; i++) {
  btntoCart[i].addEventListener("click",async function() {
....
    	let res = await toCart([name, size]);
    	console.log(res);
  });
}

У меня вторая функция кидается на все кнопки перебором. Скажите, всё ли я правильно сделала. Оно работает, просто нужно благословение. Меня смущает, что в обоих функциях async и await. Может я где-то лишний async написала?

[WbICHA]

Mellorn, "попридираюсь немного к мелочам".

можно сократить просто до
return await response.json();

Для чего тут эвейт?

elem.addEventListener('click', async function () {

Раз уже решил переписать, заменил бы уже фанкшн на человеческую стрелочную функцию.

[Анастасия]

Mellorn,

Так вот, в старых браузерах, не помню какой браузер до какой версии, сами можете погуглить, значение credentials по умолчанию - omit.

Я погуглила и там было сказано, что речь о браузерах до 2017 года. Если я использую fetch, то я уже отказываюсь от всех пользователей IE. Поправьте, если я не права: я могу ошибаться, но мне кажется, пользователей IE больше, чем пользователей других браузеров, которые последний раз обновляли его в 2017 году. Единственное, что меня смущает, так это какие-нибудь мобильные браузеры. Придёт какой-нибудь пользователь с браузером Dolphin и "привет"...

WbICHA,

Для чего тут эвейт?

убрала, всё работает.

[Анастасия]

Mellorn, последний вопрос. Меня смущают, что обе функции под async. Скажите, я права в рассуждениях?

В первой функции (где ajax) нам нужен async, чтобы остановить выполнение скрипта и дождаться ответа. Зачем нам во второй функции await? Вторая функция же по-сути не должна выполняться, так как мы же ждём пока первая выполнится. Я убирала async, ничего не работает после этого.

[WbICHA]

Анастасия, нет, неправа. С чего вдруг синхронная функция будет ждать выполнения асинхронной? Она получает от него синхронное значение (промис) и идёт дальше.

[Дмитрий Беляев]

Его используют, в основном, когда нужно получать upload progress. Всё остальное делают через fetch

Mikhail Osher, upload progress тоже уже давно делают через fetch + стримы

Если я использую fetch, то я уже отказываюсь от всех пользователей IE

Анастасия, если Ваши пользователи не госсектор, то от IE давно можно отказаться (ну разве если заказчик очень хочет, то за большие деньги можно и заморочиться)

[Mikhail Osher]

Дмитрий Беляев, юзеры IE11 всё еще приносят деньги, поэтому живём как можем

[Дмитрий Беляев]

Mikhail Osher, ну в плане fetch - вполне решаемо полифилом

[Анастасия]

Дмитрий Беляев, а что делать () =>?

[Дмитрий Беляев]

Анастасия, https://www.npmjs.com/package/@babel/preset-env

[Анастасия]

Дмитрий Беляев, https://www.youtube.com/watch?v=KjY1miMV7PQ

[Анастасия]

Mellorn,

вы не поняли конструкцию

я поняла конструкцию, но не поняла, как её адаптировать под ie11. Даже в сети пишут, что полифилов нету

[Анастасия]

Mellorn, вот есть какой-то babel - babeljs.io

вроде я ему подсунула часть своего js - он переписал код. Но хотелось бы как-нибудь автоматизировать процесс. Типа: либо иметь отдельный js файл, который будет подрубаться исключительно в браузерах, которые не поддерживают => и async/await , а дефолтный js подрубаться не будет.

Answer 1

[Анастасия]

Много ответов. По-сути все правильные, но самый главный ответ в комментах, поэтому я продублирую его сюда.

Действительно, я не получала ответ, так как делала return внутри другой функции. Решение - уход от HttpRequest в сторону fetch и использование async/await

async function toCart(e){
let response = await fetch('tocart.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(e)
});

return response.json();
}

async function btnClick(e) {
...
  let res = await toCart([name, size]);
  console.log(res);
}

Отдельное спасибо Mellorn WbICHA и vdem

Answer 2

[vdem]

toCart() судя по всему не возвращает ничего. Результат возвращает анонимная функция, которую Вы присваиваете свойству onload, и он нигде не используется. В btnClick() Вы вызываете функцию toCart(), которая в свою очередь инициирует асинхронный запрос, ответ на который придет в ту анонимную функцию.

UPD: Вот такой вариант будет работать:

function toCart(e, handleResponse) {
    const req = new XMLHttpRequest();
    ...
    req.onload = function() {
        handleResponse(this.response);
    }
}

function btnClick(e) {
    ...
    toCart([name, size], function(response) {
        console.log(response);
    });
}

Answer 3

[AUser0]

IMHO это из-за асинхронности.
Сначала выполняется первыя функция, она отправляет HTTP-запрос, и заканчивает работу, ничего не возвращая - потому что нечего возвращать.

Вторая функция получает return из первой функции, но он ПУСТОЙ, ага.

И только поооо-о-о-о-о-осле выполнения HTTP-запроса (от долей секунды до многих секунд) происходит вызов функции из res.onload, которой возвращать уже некуда/некому, она ведь вызывается не из второй функции...

Переносите обработку данных из второй функции внутрь res.onload, либо вызывайте обработочную часть второй функции изнутри res.onload.

Comments

[WbICHA]

IMHO это из-за асинхронности.

Подобные имхо лучше писать в комментарии, а не в ответы.

Вторая функция получает return из первой функции, но он ПУСТОЙ, ага.

Гениально. И причём здесь асинхронность?

которой возвращать уже некуда/некому, она ведь вызывается не из второй функции...

Ага, и не из первой. Очень странное и непонятное объяснение простого процесса.

Переносите обработку данных из второй функции внутрь res.onload, либо вызывайте обработочную часть второй функции изнутри res.onload.

А сделать нормально (через промис) не вариант?