Как реализовать ajax-запрос внутри функции? А потом вызвать ее в шаблонной строке, так вообще возможно?

Question

[Федор Герасимов]

function modification(id) {
    let valueData;
    $.ajax({
        type: 'get',
        url: '/senior_nurse/getmodification',
        data: {
            id: id
        },
        success: function(data){
            valueData = data
        }
    });
    console.log(valueData)
    return valueData
}

В консоле при этом undefined

Answer 1

[Rsa97]

Изучайте, что такое асинхронность в JS.
Функция $.ajax не ждёт ответа от сервера, она отправляет запрос и завершается.
console.log вызывается сразу после её завершения, когда ответ ещё не пришёл и в ValueData ничего нет.
Когда приходит ответ сервера, вызывается анонимная функция, указанная в success, но основная функция modification к этому моменту уже завершилась.
Всё, что вам надо делать с ValueData надо делать именно в анонимной callback-функции.
Ну, либо, изучать Promise и async/await.

Answer 2

[Сергей delphinpro]

C использованием deferred из jquery (аналог промисов):

function modification(id) {
    return $.ajax({
        type: 'get',
        url: '/senior_nurse/getmodification',
        data: { id },
    });
}

modification(1).done(res => {
  console.log(res);
});

С использованием нативных промисов

function modification(id) {
    return new Promise(resolve => {
        $.ajax({
            type: 'get',
            url: '/senior_nurse/getmodification',
            data: { id },
            success: function(res) {
                resolve(res);
            }
        });
    });
}

modification(1).then(res => {
  console.log(res);
});

С использованием async/await

async function modification(id) {
    return await new Promise(resolve => {
        $.ajax({
            type: 'get',
            url: '/senior_nurse/getmodification',
            data: { id },
            success: function(res) {
                resolve(res);
            }
        });
    });
}

let result = modification(1);
console.log(result);