javascript - Node.JS 中的同步 "GET"

Question

我试图循环访问 HTML block 中的图像并获取每个图像的原始宽度。我完美地构建了 DOM，并且在 NPM 上使用图像大小模块来检索图像宽度。

问题是获取图像和获取它们的宽度需要时间，因此在我取回宽度之前代码会继续处理。结果我无法调整 HTML block 中的宽度，因为函数在取回第一张图像之前运行并完成。

在这个 GET 请求完成之前，是否要停止处理代码？我不希望 For-Loop 在图像完成之前继续。

  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://xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Searching-For-Something.jpg" /> <div style="width:500px;border:2px;" id="mytestdiv"><p style="margin:40px;">Harry Potter <img src="https://sites01.lsu.edu/wp/lsupd/files/2011/01/poster1.jpg" style="width:900px" /> and <img width="999" src="http://xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Searching-For-Something.jpg" /> and <img style="width:190px" width="190" src="http://xdesktopwallpapers.com/wp-content/uploads/2011/11-1/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');
});

Answer 1

创建一个返回 promise 的函数，或者用中间件 promise 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);
        });
    });
}

然后迭代并存储 promise

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