Как сохранить значение post ajax-запроса к var?

Question

Я пытаюсь вызвать один API в ajax и сохранить вывод в одной переменной, а затем я показываю этот вывод пользователю.

До сих пор я пробовал эти два метода:

var Fake = $.ajax({async:false, url:'http://9dbad321.ngrok.io/output',
                       type:'post',
                       data:{'query': 'sure'},
                       dataType:"JSON"
                       }).responseJSON;

И

var Fake='';
$.ajax({
    type:'post',
    url: 'http://9dbad321.ngrok.io/output',
    data:{'query': 'sure'},
    dataType:'text',
    success: function(data) {
        useReturnData(data);
    }
});

и мой js-код выглядит так:

var $messages = $('.messages-content'),
    d, h, m,
    i = 0;

$(window).load(function() {
  $messages.mCustomScrollbar();
  setTimeout(function() {
    fakeMessage();
  }, 100);
});

function updateScrollbar() {
  $messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
    scrollInertia: 10,
    timeout: 0
  });
}

function setDate(){
  d = new Date()
  if (m != d.getMinutes()) {
    m = d.getMinutes();
    $('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));
  }
}

function insertMessage() {
  msg = $('.message-input').val();
  if ($.trim(msg) == '') {
    return false;
  }
  $('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');
  setDate();
  $('.message-input').val(null);
  updateScrollbar();
  setTimeout(function() {
    fakeMessage();
  }, 1000 + (Math.random() * 20) * 100);
}

$('.message-submit').click(function() {
  insertMessage();
});

$(window).on('keydown', function(e) {
  if (e.which == 13) {
    insertMessage();
    return false;
  }
})


var Fake = 'store api output here'

function useReturnData(data){
    myvar = data;
    console.log(myvar);
};



// var Fake = '<img src=" https://media.tumblr.com/78a9d3eae59a2a3ed8531b482bdc5a4f/tumblr_inline_mgzkontwjP1rxsw83.gif"></img> <b><center>Happy Birthday! :) </b><br><br>So What are your plans for today?'

function fakeMessage() {
  if ($('.message-input').val() != '') {
    return false;
  }
  $('<div class="message loading new"><figure class="avatar"><img src="https://images.ly/2iAb20v" /></figure><span></span></div>').appendTo($('.mCSB_container'));
  updateScrollbar();

  setTimeout(function() {
    $('.message.loading').remove();
    $('<div class="message new"><figure class="avatar"><img src="https://images.ly/2iAb20v" /></figure>' + Fake + '</div>').appendTo($('.mCSB_container')).addClass('new');
    setDate();
    updateScrollbar();
    i++;
  }, 1000 + (Math.random() * 20) * 100);

}

Но он не показывает вывод API.

Информация об API:

API type : POST
data     : {'query': 'sure'}
url (dummy) : http://9dbad321.ngrok.io/output

Я новичок в jQuery и Ajax. Я пытаюсь вызвать post API из ajax и сохранить выходные данные в одной переменной в формате строки.

Заранее спасибо!

Answer 1

Хорошо, вы можете вызвать асинхронный метод следующим образом:

const myPromise = function() {
//it returns a promise (is has to be resolved/rejected, or awaited/catched)
//or use callbacks instead, (search about callback hell first)
  return $.ajax({ 
    type:'post', 
    url: 'http://9dbad321.ngrok.io/output', 
    data:{'query': 'sure'}, 
    dataType:'jsonp'});
}


const getFake = async function() {
    try {
    var fake = await myPromise();
  } catch (error) {
    console.log("something failed", error)
  }
}

var fake = getFake();

Answer 2

Я не уверен, о чем идет речь. Если вы хотите обработать ответ ajax, асинхронно, вы должны знать о концепции обратного вызова, когда ajax решен, у вас будет выполнениепоток в один из

success: function (data) {console.log (data)} или error: function (error) {console.log (error)}

здесь у вас есть официальныйдокументы в размере $ .ajax, https://api.jquery.com/jquery.ajax/

Надеюсь, это поможет