数组值未在Node.js中的for循环中更新

Question

I am trying to push data in an array after downloading the image from download function. It's a problem in nodejs promise. How can I fix this issue.

current output:

[
    {
        sku: 99104942591,
        retailer: 'JCREWFCT',
        images: []
    }
]

expected output:

[
    {
        sku: 99103497136,
        retailer: 'JCREWFCT',
        images: [
            "http://localhost:4001/JCREWFCT/99103497136.png",
            "http://localhost:4001/JCREWFCT/99103497136_1.png"
        ]
    }
]

in outputArr I am trying to store data

 var downloadImages = async function() {
  var outputArr = [];
  for(var i=0; i<excelJsonArr.length; i++) {
    var d = excelJsonArr[i];
    var out = {
      sku : d.sku,
      retailer : d.retailer,
      images : []
    }
    if(d.image_link_1) {
      var saveDir = path.join('./public', d.retailer, d.sku+'.png');
      var imgUrl = properties.get('protocol') + '://' + properties.get('hostname') + ':' + properties.get('port') + '/' + d.retailer + '/' + d.sku + '.png';
      await download(d.image_link_1, saveDir, function(){
        out.images.push(imgUrl);
      });
    }

    if(d.image_link_2) {
      var saveDir = path.join('./public', d.retailer, d.sku+'_2.png');
      await download(d.image_link_1, saveDir, function(){
        var imgUrl = properties.get('protocol') + '://' + properties.get('hostname') + ':' + properties.get('port') + '/' + d.retailer + '/' + d.sku + '_2.png';
        out.images.push(imgUrl);
      });
    }

    outputArr.push(out);
  }
  console.log(outputArr);
}

var download = async function(uri, filename, callback){
  await request.head(uri, function(err, res, body){
    console.log('content-type:', res.headers['content-type']);
    console.log('content-length:', res.headers['content-length']);

    request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);
  });
};

Answer 1

I don't know what your download-function actually does but normally, when working with asnyc, you would do this:

await download(d.image_link_1, saveDir);
out.images.push(imgUrl);

and I you should try to work with try to catch any errors coming from download, see: Correct Try…Catch Syntax Using Async/Await

FYI, next time, share more of your code and if possible a reproduceable code or example GitHub repo, so we can see the error by ourself.

Answer 2

Since you are using async await you don't need to use callback function. Just call the desired functions after await

var downloadImages = async function () {
    var outputArr = [];
    for (var i = 0; i < excelJsonArr.length; i++) {
        var d = excelJsonArr[i];
        var out = {
            sku: d.sku,
            retailer: d.retailer,
            images: []
        }
        if (d.image_link_1) {
            var saveDir = path.join('./public', d.retailer, d.sku + '.png');
            var imgUrl = properties.get('protocol') + '://' + properties.get('hostname') + ':' + properties
                .get('port') + '/' + d.retailer + '/' + d.sku + '.png';
            await download(d.image_link_1, saveDir, function () {
                // out.images.push(imgUrl);// <-- not here
            });
            out.images.push(imgUrl); // <-- here
        }

        if (d.image_link_2) {
            var saveDir = path.join('./public', d.retailer, d.sku + '_2.png');
            await download(d.image_link_1, saveDir, function () {
                /* var imgUrl = properties.get('protocol') + '://' + properties.get('hostname') + ':' +
                    properties.get('port') + '/' + d.retailer + '/' + d.sku + '_2.png';
                out.images.push(imgUrl); */ // <-- not here
            });
            var imgUrl = properties.get('protocol') + '://' + properties.get('hostname') + ':' +
                properties.get('port') + '/' + d.retailer + '/' + d.sku + '_2.png';
            out.images.push(imgUrl);  // <-- here
        }

        outputArr.push(out);
    }
    console.log(outputArr);
}