0
213
ViewsLa llamada API devuelve la imagen después de renderizar los componentes
Estoy usando gsi un paquete npm para hacer llamadas a google images .
No puedo hacer esta llamada a la API y, justo después, renderizar la aplicación. Soy consciente de que esto tiene que ver con async , pero no tengo idea de cómo usarlo aquí. He intentado muchas cosas con la función imageSearch , pero nada ha funcionado.
Agradezco si alguien puede mostrarme una solución a mi problema.
Mi MWE:
HTML:
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Debug example</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Place favicon.ico in the root directory --> </head> <body> <h1>Debugger example</h1> <div id="main"> </div> </body> <script type="module" src="./dist/bundle.js"> </script> </html>JS:
var gis = require('gi-s'); // search images from google https://www.npmjs.com/package/gis var main = document.querySelector("#main") // Query examples var searchTopics = [ { searchTerm: 'sleep', queryStringAddition: '&tbs=ic:trans' }, { searchTerm: 'pony', queryStringAddition: '&tbs=ic:trans', filterOutDomains: ['deviantart.net', 'deviantart.com'] } ]; var imageSearch = (query) => { let response = []; gis(query, (error, results) => { console.log(results[1].url) response.push(results[1].url) } ) return response; }; // =results= look like: // [ // { // "url": "https://i.ytimg.com/vi/mW3S0u8bj58/maxresdefault.jpg", // "width": 1280, // "height": 720 // }, // { // "url": "https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg", // "width": 1600, // "height": 1200 // }, // (...) // ] var imageLayout = (title) => ((src) => {let e = document.createElement("div") e.innerHTML = title let img = document.createElement("img") img.src = src e.appendChild(img) return e}) var render = (queries) => { queries.forEach((query) =>{ let img = imageSearch(query) console.log(img) main.appendChild(imageLayout(query.searchTerm)(img[0])) })} render(searchTopics)MNP:
npm init npm install gis npm install --save-dev browserify @babel/core @babel/preset-env babelify browserify js/main.js > ./dist/bundle.js -t babelify watchify js/*.js -o ./dist/bundle.js -d Lo que sucede en mi navegador: 
1 answers
Answer question0
Su función imageSearch llama a gis() , que no crea correctamente el objeto de response hasta que se llama a la devolución de llamada pasada como segundo parámetro a gis() . Sin embargo, está devolviendo inmediatamente la matriz de respuesta vacía.
En su lugar, pase una devolución de llamada a imageSearch que se llama cuando gis() regresa, algo como esto:
const imageSearch = (query, cb) => { gis(query, (error, results) => cb(error, results[1].url)); }; const render = (queries) => { queries.forEach((query) => { let img = imageSearch(query, (error, img) => { if (error) { console.log("An error happened: ", error); return; } main.appendChild(imageLayout(query.searchTerm)(img)) }); }); };También podría pasar a usar Promises , pero eso es un asunto diferente y no cambiaría en gran medida el resultado del código, solo el formato del mismo.