コンポーネントをレンダリングした後、API呼び出しは画像を返します

2
2022.01.14

私は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

私のブラウザで何が起こるか: enter image description here

回答
3
2022.01.14

imageSearch関数は、gis()に 2 番目のパラメータとして渡されたコールバックが呼び出されるまで、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))
    });
  });
};

また 、Promise の使用に移ることもできますが、それは別の問題であり、コードの結果を大きく変えるものではなく、形式だけを変更します。