Мне нужно отправить несколько ajax запросов и сравнить данные, используя jQuery. Этот код работает, но слишком медленно. Как это оптимизировать?

Question

Пожалуйста, помогите мне с этим кодом. Работает очень медленно, около 2 минут. Я новичок в js и не знаю, как его улучшить. Мне нужно взять данные из нескольких ajax запросов и сравнить их. Я пытался использовать для циклов, $ .map, но он работает так же. Что я делаю не так?

var user, post, image, comment;

$.when(
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    success: function(postData) {
      post = postData;
    },
  }),
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/comments",
    success: function(commentData) {
      comment = commentData;
    },
  }),
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    success: function(userData) {
      user = userData;
    },
  }),
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/photos",
    success: function(imageData) {
      image = imageData;
    },
  }),
).then(function() {
  $.each(post, function(index, postItem) {
    $.each(comment, function(index, commentItem) {
      $.each(user, function(index, userItem) {
        $.each(image, function(index, imageItem) {
          if (
            postItem.id == commentItem.postId &&
            postItem.id == imageItem.id &&
            postItem.userId == userItem.id
          ) {
            console.log(
              "post title: " +
                postItem.title + 
                " Post image: " +
                imageItem.url +
                " Author: " +
                userItem.name +
                " Comment: " +
                commentItem.body
            );
          }
        });
      });
    });
  });
});

Answer 1

Используя утилиту Mapper, вы можете очень быстро ее оптимизировать. см. пример.

Вы можете найти скрипт здесь: https://gist.github.com/deepakshrma/4b6a0a31b4582d6418ec4f76b7439781

var user, post, image, comment;
const results = Promise.all(
  [
    fetch("https://jsonplaceholder.typicode.com/posts").then( x => x.json()),
    fetch("https://jsonplaceholder.typicode.com/comments").then( x => x.json()),
    fetch("https://jsonplaceholder.typicode.com/users").then( x => x.json()),
    fetch("https://jsonplaceholder.typicode.com/photos").then( x => x.json())
  ]
).then(function([posts, comments, users, images]) {
  const postMapper = new Mapper(posts, "id")
  const commentMapper = new Mapper(comments, "postId")
  const userMapper = new Mapper(users, "id")
  const imageMapper = new Mapper(images, "id")
  console.log(posts, comments, users, images)
  posts.forEach(post => {
    const postM = postMapper.find(post.id)
    const userM = userMapper.find(post.userId)
    const imagM = imageMapper.find(post.id)
    console.log(
      postM, 
      userM,
      imagM
    )
  })
});
class Mapper {
  constructor(array, key) {
    this.map = array.reduce((map, item) => {
      const val = item[key];
      if (!map[val]) {
        map[val] = [];
      }
      map[val].push(item);
      return map;
    }, {});
  }

  find(key) {
    return this.map[key] && this.map[key][Mapper.FIRST_INDEX]; //return blank array
  }

  findAll(key, returnUndefined) {
    //return blank array
    return this.map[key] ? this.map[key] : returnUndefined ? undefined : [];
  }
}

Mapper.FIRST_INDEX = 0;

Answer 2

Для комментариев, пользователей и фотографий преобразуйте массив объектов в карту (или объект), ключи которой - это идентификаторы, а значения - это значения, которые вы хотите извлечь из него позже. Затем l oop над сообщениями и по идентификаторам в сообщении найдите соответствующие значения на Картах. Если все 3 карты имеют совпадение, выведите результат.

Обратите внимание, что нет необходимости в большой зависимости, такой как jQuery, просто сделать сетевой запрос и выполнить итерации по массиву - встроенные методы JS работает просто отлично:

Promise.all(
  ['posts', 'comments', 'users', 'photos'].map(
    path => fetch('https://jsonplaceholder.typicode.com/' + path).then(res => res.json())
  )
).then(([posts, comments, users, images]) => {
  const commentBodiesByPostId = new Map(
    comments.map(comment => [comment.postId, comment.body])
  );
  const imageUrlsById = new Map(
    images.map(image => [image.id, image.url])
  );
  const userNamesById = new Map(
    users.map(user => [user.id, user.name])
  );
  for (const post of posts) {
    const commentBody = commentBodiesByPostId.get(post.id);
    const imageUrl = imageUrlsById.get(post.id);
    const userName = userNamesById.get(post.userId);
    if (commentBody && imageUrl && userName) {
      console.log(`Post title: ${post.title}\nPost image:${imageUrl}\nAuthor:${userName}\nComment:${commentBody}`);
    }
  }
});