词汇环境如何处理承诺？

Question

来自， 我看到了帖子的第一个块代码日志错误值，而代码日志的第二个块正确值。

实用程序的功能是错误和正确版本的功能

function getBlogPosts() {
  const posts = [
    { id: 1, title: 'Post One', body: 'A blog post!' },
    { id: 2, title: 'Post Two', body: 'Another blog post!' },
    { id: 3, title: 'Post Three', body: 'A third blog post!' },
  ];

  return new Promise((resolve) => {
    setTimeout(() => resolve(posts), 200);
  });
}

function getBlogComments(postId) {
  const comments = [
    { postId: 1, comment: 'Great post!' },
    { postId: 2, comment: 'I like it.' },
    { postId: 1, comment: 'You make interesting points.' },
    { postId: 3, comment: 'Needs more corgis.' },
    { postId: 2, comment: 'Nice work!' },
  ];

  // get comments for the given post
  const postComments = comments.filter((comment) => comment.postId === postId);

  return new Promise((resolve) => {
    setTimeout(() => resolve(postComments), 300);
  });
}

错误版本 ...帖子总是包含第三帖的详细信息，即使评论来自帖子1和2

function loadContent() {
  getBlogPosts().then((posts) => {
    for (post of posts) {
      getBlogComments(post.id).then((comments) => {
        console.log({ ...post, comments });
      });
    }
  });
}

loadContent();

正确的版本 post 1和2的评论分别与帖子合适地存储在一起，

async function loadContent() {
  const posts = await getBlogPosts();

  // instead of awaiting this call, create an array of Promises
  const promises = posts.map((post) => {
    return getBlogComments(post.id).then((comments) => {
      return { ...post, comments };
    });
  });

  // use await on Promise.all so the Promises execute in parallel
  const postsWithComments = await Promise.all(promises);

  console.log(postsWithComments);
}

loadContent();

1. 为什么错误的版本不log log循环变量的正确帖子？理想情况下，解释可以集中于词汇环境如何与承诺一起工作，假设与此错误相关，
2. 是否可以在没有地图的情况下修复错误的版本？ 也许出于某种原因，我无法并行运行，地图 + Promise.All模式都可以。

Answer 1

1。“错误的版本”未记录所需的结果，因为

• post 变量定义为全局变量，而不是块分布的变量

• 时间然后，处理程序被称为 POST> POST 变量变量为已经从数组中设置为第三篇文章。这是一个更详细的示例： https：//whistlr.info/2021/async-and-2021/async---------- -tasks/

您可以通过记录帖子来验证它：

function loadContent() {
  getBlogPosts().then((posts) => {
    for (post of posts) {
      getBlogComments(post.id).then((comments) => {
        console.log({ ...post, comments });
      });
    }
  });
}

loadContent();
console.log(post);

这应该插入严格模式。

2。修复将是使用 Let/const 代替 post 变量声明：

function loadContent() {
  getBlogPosts().then((posts) => {
    // Use block-scoped let to avoid the variable 
    // leaking to the global scope
    for (let post of posts) {
      getBlogComments(post.id).then((comments) => {
        console.log({ ...post, comments });
      });
    }
  });
}

loadContent();

请注意，即使在严格的模式下，也使用 var var modifier不会有帮助，因为它范围范围 Let/const 相比，封闭功能范围不是块范围。
此处的更多上下文： https://javascript.info/var