Estoy tratando de tomar una URL externa agregada al frente de una página -> enviar URL al raspador -> hacer que el raspador tome atributos de metadatos -> empujar los atributos de metadatos de regreso al frente de la página.
Hasta ahora, el raspador funciona, pero ¿cómo podría enviar estos datos a la página? Obteniendo el error:
TemplateContentRenderError was thrown [eleventy:dev] > (./src/index.njk) [eleventy:dev] TypeError: Cannot read property 'slice' of undefinedAquí está el código actual que tengo:
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; }); Cuando console.log itemMeta o postsWithUpdates , regresa como Promise { <pending> }
Cualquier y toda idea es muy apreciada, gracias
El problema aquí es la combinación de código síncrono y código asíncrono con promesas. Si no está familiarizado con las promesas, MDN tiene una gran guía sobre promesas .
Esencialmente, una Promesa es una forma de ejecutar algún código más tarde después de que se haya completado una tarea. Esto es útil cuando está esperando que finalice otro proceso, como una solicitud de red.
Aquí, getMetaData() devuelve una Promesa, donde puede manejar los datos en el controlador then . Sin embargo, el código posterior (console.log y return) no espera a que se complete la tarea, razón por la cual ve Promise { <pending> } desconectado.
Para solucionar esto, querrá cambiar a la sintaxis async / await . Afortunadamente para nosotros, Eleventy admite funciones async en 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); }); Obtenga más información sobre Promise.all o las funciones async .