无法映射通过 JavaScript 的提取 API 创建的数组

Question

我正在尝试通过 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 returns 一个空数组。奇怪的是，如果我不使用 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) 是一个 asynchronous 函数。您正试图在 fetch 响应之前映射到 articles 数组。

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

无法映射通过 JavaScript 的提取 API 创建的数组

Can't map through array created via JavaScript's fetch API

javascript

arrays

fetch-api