将数据从API推送到Eleventy中的现有页面（组合数据源）

Question

我正在尝试将外部URL添加到页面的正面 - ＆gt;将URL发送到刮板 - ＆GT;有刮刀占用元数据属性 - ＆gt;将元数据归因于佩奇的前提。

到目前为止，刮板正在工作，但是我如何能够将这些数据推到页面上？获取错误：

TemplateContentRenderError was thrown
[eleventy:dev] > (./src/index.njk)
[eleventy:dev]   TypeError: Cannot read property 'slice' of undefined

这是我拥有的当前代码：

config.addCollection('products', collection => {

// This is typical Collection by Tag call
const products = collection.getFilteredByTag('products');

// Map over all the posts
const postsWithUpdates = products.map(item => {

    // get URL from each page and pass it into scraper
    const itemMeta = getMetaData(item.data.refUrl).then((data) => {

        // map each page data with data from the scraper
        item.description = data.description;
        item.Image = data.icon;
        // item.date = item.data.post ? new Date(item.data.post.date) : item.date
        console.log(item.description);

        return item;
    });

    console.log(itemMeta);
    return itemMeta;
});


return postsWithUpdates;
}); 

当我console.log itemmeta或postswithupdates它返回为Promise {＆lt; pernew＆gt; }

所有洞察力都非常感谢，谢谢

Answer 1

这里的问题是同步代码和异步代码与 Promise 的混合。如果您不熟悉 Promise，MDN 有一个 很棒的指南兑现承诺。

本质上，Promise 是一种在任务完成后运行一些代码的方法。当您等待另一个进程（例如网络请求）完成时，这非常有用。

这里，getMetaData() 返回一个 Promise，您可以在其中处理 then 处理程序中的数据。但是，之后的代码（console.log 和返回）不会等待任务完成，这就是为什么您会看到 Promise {; } 注销。

要解决此问题，您需要切换到 async/await 语法。幸运的是，Eleventy 支持异步 addCollection 中的函数。

// We need to add the `async` keyword to enable `await` syntax.
config.addCollection('products', async (collection) => {

const products = collection.getFilteredByTag('products');

// When mapping over the posts, we also need to
// add the `async` keyword to the callback function.
// This will return an array of Promises.
const postsWithUpdates = products.map(async (item) => {

    // Now we can use the `await` keyword! This will wait for the
    // task to complete and place the result in `itemMeta`.
    const itemMeta = await getMetaData(item.data.refUrl)

    // map each page data with data from the scraper
    item.description = itemMeta.description;
    item.Image = itemMeta.icon;
    // item.date = item.data.post ? new Date(item.data.post.date) : item.date
    console.log(item.description);    

    console.log(item);
    return item;
});

// Since we now have an array of Promises, we need to resolve each
// one to their final values. We can do this with `Promise.all`.
// Don't forget to `await` the call!
return await Promise.all(postsWithUpdates);

});

了解有关 Promise.all< 的更多信息/code>或 异步函数。