Как вытащить возвращаемое значение из ajax-запроса?

Question

[Роман]

Добрый день!

Зарегистрировал свою js-библиотеку для работы с товарами в коробке Битрикс24.

Столкнулся с проблемой:

Делаю запрос к модулю через BX.ajax.runAction, для удобства обернул вызов в отдельную асинхронную функцию:

ProductData.post = async function (actionName, params = {}) {

    let action = 'ramapriya:productdata.api.calculator.' + actionName;

    const request = await BX.ajax.runAction(action, {
        method: 'POST',
        data: params
    });

    return await request.data;
}

Так вот, когда я вызываю данную функцию внутри другой, то не могу понять, как вытащить из неё данные для использования в других местах библиотеки:

const inputNames = this.post('getProductPropertiesNames', {
    productId: this.extractProductId(window.location.href)
});

let inputs;

inputNames.then(response => {
    console.log(response.inputs) // работает, возвращает нужный результат
    inputs = response.inputs;
})

console.log(inputs) // undefined

Подскажите, что и где я делаю не так.
Заранее спасибо.

Comments

[Павел Корнилов]

Не проверял, но как-то так должно:

await this.post('getProductPropertiesNames', {
    productId: this.extractProductId(window.location.href)
});

Положите пример в песочницу.

А inputs у вас на момент вызова лога, естественно, undefined.

[Роман]

Павел Корнилов, спасибо за совет, но чтобы использовать await, функция должна быть async.
А у меня уже post асинхронный.

[Павел Корнилов]

Роман, ProductData.post = async function ...
Разве нет? Тут я не уверен, поскольку обычно пользую Промисы. Поэтому и говорил про песочницу, чтобы попробовать.
Составьте несложный пример, выложите, а я гляну.

[Роман]

Павел Корнилов,

/**
 * Ajax
 *
 * @param actionName
 * @param params
 * @returns {Promise<*>}
 */
ProductData.post = async function (actionName, params = {}) {

    let action = 'ramapriya:productdata.api.calculator.' + actionName;

    const request = await BX.ajax.runAction(action, {
        method: 'POST',
        data: params
    });

    return await request.data;
};

const setWeightButton = BX('setWeight');

    // Расчёт веса товара
    setWeightButton.addEventListener('click', () => {
        setWeightButton.setAttribute('class', 'ui-btn ui-btn-wait')
        const request = this.post('setWeight', {
            params: this.params
        });

        request.then(response => {
            this.weightField.value = response[this.propertyWeightId]
            setWeightButton.setAttribute('class', 'ui-btn ui-btn-primary')
        })
    })

В этом примере всё работает нормально.

Но если мне нужно получить имена инпутов для дальнейшей обработки, то было бы удобнее получать их так же аяксом, а не искать в документе findChild'ом

[Павел Корнилов]

Роман, там Tim ответил грамотно. Посмотрите.
А я просил выложить код в песочницу, а не сюда. Как я тут потестировать смогу?

Answer 1

[Tim]

У слова async один простой смысл: эта функция всегда возвращает промис. Значения других типов оборачиваются в завершившийся успешно промис автоматически - Источник . Чтобы получить данные нужно использовать асинхронную функцию либо через then.
Пример 1

...
ProductData.post().then(data => console.log(data));

Пример 2

(async function() {
    const response = await ProductData.post();
    console.log(response);
})()

Можно использовать callback

inputNames.then(response => {
    console.log(response.inputs) // работает, возвращает нужный результат
    test(response.inputs);
})

function test(inputs) {
	console.log(inputs)
}

inputs = undefined - потому что в момент исполнения промис еще не завершился.
Если принципиально хотите использовать синхронный запрос, то воспользуйтесь синхронным аяксом. На битриксе не знаю как это сделать. На время выполнения запроса будет блокироваться браузер.
let responce = $.ajax({async: false, ...}).responceText;