渲染组件后 API 调用返回图像答案

【问题标题】：API call returns image after I render the components渲染组件后 API 调用返回图像
【发布时间】：2022-01-14 04:35:46
【问题描述】：

我正在使用 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

在我的浏览器中发生了什么：

【问题讨论】：

标签： javascript node.js asynchronous google-api browserify

【解决方案1】：

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

相反，将一个回调传递给imageSearch，当gis() 返回时调用该回调，如下所示：

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，但这是另一回事，不会在很大程度上改变代码的结果，只是改变它的格式。

【讨论】：

非常感谢。这很有意义。虽然，我在 GitHub 上搜索了这个包的使用，发现 Promises 和 callbacks 都在使用。到目前为止，我还没有理解它们。你帮了大忙??。谢谢。