Javascript: как обрабатывать вызовы функций jQuery.ajax в рамках операции фильтра массива?

Question

Я недостаточно знаком с вызовами AJAX, чтобы знать, как это работает или не работает.Если у меня есть массив A и я использую A.filter(), как будут работать вызовы AJAX в фильтре?Я полагаю, что массив используется для заполнения шаблона, все синхронно.

// Event calls function to filter list on page.
// Function calls filterArray(arrayList, objFilters)

async_fetch: function(string)
{
  // Utilizes $.ajax() to retrieve a JSON array
  var deferred = $.Deferred();

  $.ajax({
    url: ...,
    dataType: "json",
    success: function(data) {
      var response = data;
      deferred.resolve(data);
    },
    error: function(data)
    {
      //...
      deferred.reject(msg);
    }
  });
  return deferred;
};

filterArray: function(list, filters)
{
  var filteredList = list.filter(function(item) {
    for(var key in filters) {
      // Actions for each of multiple filters to compare against...
      else if(key == 'FILTER_X') {
        var data = async_fetch(item.name);
        // Use data to arrive at a determination, where true means I don't want to include this item in the filtered list
        if(determination)
          return false;
      }
    }
  };
  return filteredList;
};

// Results of filterArray() are passed along to a template within Backbone 
//   to redraw a segment of HTML on the page.

Будет ли вызов фильтра только синхронно ждать завершения вызова AJAX?Будет ли список фильтроваться иначе и возвращаться, и вызов AJAX должен подключиться к отфильтрованному списку и по существу завершить фильтрацию позже?Должен ли я просто создать версию async_fetch(), которая не является асинхронной?

Answer 1

Привет, вы можете разрешить обещание после фильтрации данных.Например, надеюсь, это поможет вам.

$(document).ready(function(){
  function async_fetch(string)
{
  // Utilizes $.ajax() to retrieve a JSON array
  var deferred = $.Deferred();

  $.ajax({
    url: string,//your URL
    dataType: "json",
    success: function(data) {
      var filterdData= filterArray(data);
      deferred.resolve(filterdData);
    },
    error: function(data)
    {
      //...
      deferred.reject(msg);
    }
  });
  return deferred;
};

 function filterArray(data)
{
  var filteredList = data.filter(function(item) {
   //filter whatever you want
    })
  return filteredList;
}

async_fetch(url).then(function(response){
  //now you will get the filterd data
  console.log(response);
}) 
});

Answer 2

Вы можете сделать это с помощью async/await, как показано ниже: -

const filterArray = async function (list, filters) {
    var filteredListPromise = list.filter(async function (item) {
        for (var key in filters) {
            // Actions for each of multiple filters to compare against...
            if (key == 'FILTER_X') {
                return arriveAtDetermination(item.name);
            }
            else {
                //other filters
            }
        }
    });
    return Promise.all(filteredListPromise);
};

async function arriveAtDetermination(name) {
    let data = await async_fetch(name);
    return determination ? true : false;//your logic
}

//Now you can filter like

filterArray(list, filters).then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
})

Answer 3

Вам потребуется .then () или .done () на вызов, например ....

 async_fetch(item.name).then(function(data){
        if (data.determination)
          // do something
    })

....