Как правильно сделать скрипт с ajax-запросами?

Question

[Alexei Lavrov]

Пытаюсь сделать небольшой js-скрипт, который получает на входе id блока, перебирает в нем все ссылки, спрашивает через api в hypercomment сколько у этой страницы комментариев и, если комментариев больше 0, то добавляет блок с количеством комментариев.

Как правильно спланировать работу такого скрипта? У меня есть две идеи:

1. Перебор вызывает функцию, которая возвращает кол-во комментов, а потом добавляется блок.
   
2. В самой функции запроса кол-ва комментов прямо есть колл-бек функция, которая добавляет блок.
   

Пытался реализовать первый вариант, но не разобрался как вернуть из такой функции цифру (возвращается объект) и как пользоваться Promise.

Comments

[Андрей Седышев]

Код покажите. Как с API работаете? XMLHttpRequest/$.ajax/fetch?

[Alexei Lavrov]

Андрей, https://jsfiddle.net/alexeilavrov/a9byzw6p/ - как-то так. Тут с Фидла ключ не генерится, но вообще это работает.

Answer 1

[Андрей Седышев]

var getUrlSha = function(url) {
    return $.ajax({
      type: 'GET',
      url: 'sha1.php',
      data: {
        url: url
      }
    });
  };

  var getCommentsCount = function(url, sign) {
    return $.ajax({
      type: 'POST',
      url: 'https://c1api.hypercomments.com/1.0/streams/get',
      dataType: 'jsonp',
      cache: false,
      crossDomain: true,
      data: {
        body: '{"widget_id":11070,"link":"' + url + '"}',
        signature: sign
      }
    });
  };

  function getSumComments(url) {
    return getUrlSha(url).then(function(sign) {
      return getCommentsCount(url, sign);
    });
  }


  getSumComments('https://www.metrtv.ru/articles/second_estate/11617').then(function(count) {
    console.log(count);
  });

https://jsfiddle.net/oag3kkgt/3/

Comments

[Alexei Lavrov]

Спасибо! Работает. Теперь осталось разобраться почему работает :)

[Андрей Седышев]

alexeilavrov, задавайте вопросы :)

[Alexei Lavrov]

Андрей, Можно еще пару вопросов?

1.
Еще немного усложнил скрипт и опять старая проблема. Не могу никак понять почему. https://jsfiddle.net/alexeilavrov/urpvpuLt/3/

$(this).text(function(){
    return getSumComments(articleUrl).then(function(count){
        return count.data[0].cm2;
    });
});

Этот код возвращает объект. Я никак не могу понять почему.

2.
Когда тестировал вывод результатов в консоль, то каждый раз получал разное количество результатов. Вот прямо жал подряд 10 раз F5 и каждый раз было разное количество результатов. Есть какие-то подводные камни, которые ограничивают использование ajax-запросов?

[Alexei Lavrov]

Первый вопрос я решил, тем что присвоил всем ссылкам новые id и потом в самой функции уже относительно этих ссылок проставил цифры.

[Андрей Седышев]

alexeilavrov, смотрите, что по факту возвращает запрос к API (вкладка Network в консоли)