Как я могу вернуть ответ от вызова ajax для хранения в переменной? - PullRequest
Новая
       13

Как я могу вернуть ответ от вызова ajax для хранения в переменной?

1 голос
/ 26 апреля 2019

Я хотел бы сохранить результат ответа на вызов ajax. Это связано с тем, что ajax - это основной вызов API, используемый несколькими функциями для извлечения информации из API.

Я вызываю функцию callAPI более 8 раз в моем приложении. Конечно, я могу дублировать функцию callAPI 8 раз, чтобы правильно получить информацию, но это не крутой способ кодирования. 

var result = callAPI("GET",url,'');
$('#status').val(result.success);
$('#output').val(result);

function callAPI(method_input, url_input, body_input){
    var urli = url_input;
    var datai = body_input;
    var method = method_input;

    $.ajax({
        url: urli,
        beforeSend: function(xhrObj){
            xhrObj.setRequestHeader("some header","some value");
        },
        type: method,
        data: datai,
    })
    .done(function(data,status) {
        console.log("success");
        console.log(data);
        return JSON.stringify(data);
    })
    .fail(function(data,status) {
        console.log("error");
        console.log(data);
        return JSON.stringify(data);
    });
  }

Я пытался сохранить возвращаемое значение, используя var result = ajax (значение); но результат пуст

есть ли способ сохранить возвращаемое значение функции в переменной?

EDIT Я решил эту проблему с помощью функции обратного вызова, как показано ниже 

function callbackResult(result){
$('#status').val(result.success);
$('#output').val(result);
}

function callAPI(method_input, url_input, body_input, callback){
    var urli = url_input;
    var datai = body_input;
    var method = method_input;

    $.ajax({
        url: urli,
        beforeSend: function(xhrObj){
            xhrObj.setRequestHeader("some header","some value");
        },
        type: method,
        data: datai,
    })
    .done(function(data,status) {
        console.log("success");
        console.log(data);
        return JSON.stringify(data);
        callback(data);
    })
    .fail(function(data,status) {
        console.log("error");
        console.log(data);
        return JSON.stringify(data);
        callback(data);
    });
  }

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

Спасибо вам всем.

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Вам нужно 'async': false, поэтому: 

var result = $.ajax({
    url: "https://api.github.com/users",
    'async': false,
    type: 'GET'
})
.done(function(data,status) {
    console.log("success");
})
.fail(function(data,status) {
    console.log("error");
});


console.log("result: " + result.responseText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0 голосов
/ 04 июня 2019

Несколько замечаний:

  1. Вместо JSON.stringify() Я думаю, что вы хотите использовать JSON.parse() для анализа строки JSON, которая, вероятно, была возвращена вашим API.
  2. Вы можете использовать опцию $.ajax dataType для автоматического разбора строки JSON в объект.
  3. $.ajax() возвращает обещание, которое можно объединить в цепочку для добавления как можно большего количества обратных вызововпри необходимости.

Более элегантным решением было бы вернуть обещание от вашей функции и связать ваши обратные вызовы.Пример: 

    function callAPI(method_input, url_input, body_input) {
      var urli = url_input;
      var datai = body_input;
      var method = method_input;

      return $.ajax({
          url: urli,
          // Automatically parses JSON response
          dataType: 'json', 
          beforeSend: function(xhrObj) {
            xhrObj.setRequestHeader("some header", "some value");
          },
          type: method,
          data: datai,
        })
        .done(function(data, status) {
          console.log("success");
          console.log(data);      
        })
        .fail(function(data, status) {
          console.log("error");
          console.log(data);      
        });
    }

    callAPI('GET', '').then(function(result){
      // Do something with my API result
    });

Если вы планируете делать все запросы сразу, с этим решением вы можете рассмотреть возможность объединения всего запроса в одно обещание с $.when().Пример: 

    $.when(
      callAPI('GET', ''),
      callAPI('GET', 'second'),
      callAPI('GET', 'third')
    ).then(function(firstResult, secondResult, thirdResult){
      // Do stuff with the result of all three requests
    });
...