API 在渲染组件后调用 returns 图像

Question

我正在使用 g-s-i 一个 npm 包来调用 google images。

我无法进行此 API 调用，并且无法在之后呈现应用程序。我知道这与 async 有关，但我不知道如何在这里使用它。我用函数 imageSearch 尝试了很多东西，但没有任何效果。

如果有人能告诉我解决我的问题的方法，我将不胜感激。

我的 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('g-i-s'); // search images from google https://www.npmjs.com/package/g-i-s

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)

NPM：

npm init
npm install g-i-s

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

我的浏览器发生了什么：

Answer 1

您的 imageSearch 函数调用 gis()，它不会成功创建 response 对象，直到调用作为第二个参数传递给 gis() 的回调。但是，您将立即返回空响应数组。

而是将回调传递给 imageSearch，在 gis() returns 时调用该回调，如下所示：

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))
    });
  });
};

您也可以继续使用 Promises，但那是另一回事，不会在很大程度上改变代码的结果，只是改变它的格式。

API 在渲染组件后调用 returns 图像

API call returns image after I render the components

javascript

asynchronous

google-api

node.js

browserify