我正在使用g-s-inpm 包來呼叫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)
新PM：
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
我的瀏覽器會發生什么：
uj5u.com熱心網友回復：
在呼叫作為第二個引數傳遞的回呼之前，您的imageSearch函式呼叫gis()不會成功創建物件。但是，您會立即回傳空回應陣列。responsegis()
相反，將回呼傳遞給回傳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，但這是另一回事，并且不會在很大程度上改變代碼的結果，只會改變它的格式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/411874.html
標籤：