Синхронное выполнение ajax-запроса [дубликат]

106

31 июля 2019, 05:20

На данный вопрос уже ответили:

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания 3 ответа

Выношу ajax-запрос в отдельную функцию с целью повторного использования:

function getProducts(a,b) {                          
  $.ajax({
   type: "POST",
   url: url,
   data: {cat: a, subcat: b},                   
     success: function(data) {
       return data;
     },       
     async: false                                                                                 
  });
}
var list = getProducts(10,20);
console.log(list); // undefined

Вызов функции выдает undefined, хотя data внутри функции определено. Насколько я понимаю, проблема в ассинхронности, хотя явно указано async: false.

Прошу подсказать, как правильно использовать ajax-запрос в виде внешней функции.

Answer 1

Запрос выполняется синхронно, что есть плохая практика и, в данном случае, совершенно бесполезно. undefined, в вашем случае, возвращает не jquery ajax запрос, а функция, которая отрабатывает не дожидаясь пока с сервера что-то придет.

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

let getProducts = (a,b, handler) => { 
  $.ajax({ 
    type: "POST", 
    url: url, 
    data: {cat: a, subcat: b}, 
    success: function(data) { 
      handler(data); 
    } 
  }); 
} 
 
let list; 
getProducts(10,20, (data) => { 
  list = data; 
  console.log(list); 
});