<div id="result">
</div>  

const postsMock = [
  {
    id: 1,
    authorId: 1,
    content: "Lorem Ipsum"
  },
  {
    id: 2,
    authorId: 2,
    content: "Lorem Ipsum 2"
  },
  {
    id: 3,
    authorId: 1,
    content: "Lorem Ipsum 2"
  }
];
const autorsMock = [
  {
    id: 1,
    name: "Jan Kovalsky"
  },
  {
    id: 2,
    name: "Jonny Smith"
  }
];
function getPosts() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(postsMock);
    }, 2000);
  });
}

function getAutor(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(
        autorsMock.filter(autor => id == autor.id).pop() || {
          name: "Gal Anonim"
        }
      );
    }, 1000);
  });
}

async function fetch() {
  const posts = await getPosts();
  const autors = await Promise.all(posts.map(post => getAutor(post.authorId)));
  
  const element = document.getElementById("result");
  
  posts.map((post, index) => {
   
    post.autor = autors[index].name;
    let postHtml = document.createElement("div");
    
    postHtml.innerHTML  = `
        <h1> autor:${post.autor}</h1>
        <p>${post.content}</p>
      `;
     console.log(postHtml);
    element.appendChild(postHtml);

    return post;
  });
}
window.onload = function() {
  fetch();
};