javascript - 无法映射通过 JavaScript 的 fetch API 创建的数组

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 6 年前。

我正在尝试通过 REST API 获取 post 对象数组，并修改该数组以仅保留我需要的信息。

post 对象数组来自 WordPress REST API，因此输出看起来像 this .

这是我迄今为止尝试做的事情:

// We'll be pulling data from this URL.
const endpoint = 'https://wordpress.org/news/wp-json/wp/v2/posts';

// Let's create an array where we will store this data.
const articles = [];

// Let's fetch the data with JavaScript's Fetch API.
fetch(endpoint)
    .then(blob => blob.json())
    .then(data => articles.push(...data));

// If we console log at this point, we have all the posts.
console.log(articles);

// Now let's loop through the data and create a new constant with only the info we need.
const filtered = articles.map(post => {
    return {
        id: post.id,
        title: post.title.rendered,
        link: post.link,
        date: post.date,
        excerpt: post.excerpt.rendered,
    };
});

// filtered should now be an array of objects with the format described above.
console.log(filtered);

不幸的是，这不起作用。 filtered返回一个空数组。奇怪的是，如果我不使用 fetch，而是将从 API 获取的 JSON 内容直接粘贴到常量中，那么一切都会正常工作。

我在这里缺少什么？为什么我无法修改从 fetch 获取的数组？

谢谢!

<小时/>

感谢下面评论中的建议，我设法让它发挥作用。我必须修改 then() 内的数组调用，如下所示:

fetch(endpoint)
.then(blob => blob.json())
.then(function(data) {
    return data.map(post => {
        return {
            id: post.id,
            title: post.title.rendered,
            link: post.link,
            date: post.date,
            excerpt: post.excerpt.rendered,
        };
    });
})
.then(data => articles.push(...data));

Answer 1

fetch(endpoint) 是一个异步函数。您正尝试在 fetch 响应之前映射 articles 数组。

看看这个:Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference