Giphy API Call возвращает результаты не в порядке - PullRequest
Новая
       11

Giphy API Call возвращает результаты не в порядке

0 голосов
/ 10 мая 2018

Я использую вызов API для Giphy, чтобы пройти через строковый массив и вернуть Gif для каждого слова в строке.

Работает, но результаты отображаются не в порядке.

Начало массива: «В ПОЛНОМ ВИДЕ, САМОСТОЯТЕЛЬНЫЙ СНИМАНИЕ МАЛЛИГАНА ИЗ ИМЕНИ ЛЕСТНИЦЫ»

И результаты выглядят так: Пухлый Маллиган Бак Бак ... вы поняли ...

Вот код: 

    var chapter = "STATELY, PLUMP BUCK MULLIGAN CAME FROM THE STAIRHEAD," 

let words = chapter.split(" ");

for (i=0; i<words.length; i++){

    let word = words[i];

    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
    $.ajax({
        url: queryURL,
        method: 'GET'
        })
        .done(function(response) {


                var results = response.data;

                    var gifDiv = $('<div/>');
                    var gif = $('<img/>');
                    gif.addClass('myImg');
                    gif.attr('src', results[0].images.fixed_height.url);
                    gif.attr('data-animate', results[0].images.fixed_height.url)
                    gif.attr('data-state', 'still');
                    gifDiv.append(gif);

                    gifDiv.append('<h1>' + word + '</h1>');

                    gifDiv.appendTo($('#gifs-here'));

  })
};

есть идеи, почему результаты вышли из строя?

1 Ответ

0 голосов
/ 10 мая 2018

Два варианта

Сделайте все запросы как можно быстрее, но обработайте результаты последовательно 

$.when(...chapter.split(" ").map(word => {
    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
    return $.ajax({
        url: queryURL,
        method: 'GET'
    });
})).then((...responses) => {
    responses.forEach(response => {
        var results = response.data;
        ..... rest of your done code .....
    });
})

Выполнять запросы и обрабатывать результаты последовательно, каждый запрос ожидает предыдущей обработки или не завершен 

chapter.split(" ").reduce((p, word) => {
    return p.then(() => {
       var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
        return $.ajax({
            url: queryURL,
            method: 'GET'
        }).then(response => {
            var results = response.data;
            ..... rest of your done code .....
        });
    });
}, $.when())

Для полноты, поскольку jQuery $ .ajax возвращает thenable ... вы можете использовать Promises 

Promise.all(chapter.split(" ").map(word => {
    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
    return $.ajax({
        url: queryURL,
        method: 'GET'
    });
})).then(responses => {
    responses.forEach(response => {
        var results = response.data;
        ..... rest of your done code .....
    });
})

и 

chapter.split(" ").reduce((p, word) => {
    return p.then(() => {
       var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
        return $.ajax({
            url: queryURL,
            method: 'GET'
        }).then(response => {
            var results = response.data;
            ..... rest of your done code .....
        });
    });
}, Promise.resolve());
...