在返回所有异步函数以更新 firestore 文档之前，如何等待 NodeJS 中的多个异步函数？

Question

我将简化下面的代码并在整个过程中添加注释。

一般的想法是，一旦我的 android 应用程序（用于我的 pops 的建筑演出）中的“销售线索被保存”（客户电话），我就会使用 pupeeteer 抓取一个网站以收集有关该地址的一些数据。 我已经完成了所有工作，但（到目前为止 - 成功）我一直在从抓取的网站上保存“外部 URL”，但现在我只想获取外部 URL，获取图像，将其上传到我的 Firestore 存储，获取 Signed URL，然后使用此“签名 URL”（而不是外部 URL）更新 firestore 文档一切似乎都正常，只是顺序不对。 我正在获取图像 Url，并且已成功将其保存到 firestore 存储，但我签名的 URL 回来得太晚了。 我只是对这里回调（或异步函数）的处理感到困惑。 我不一定需要代码（但不会拒绝，哈哈）。 也许只是我需要如何组织代码的一般指南，我已经阅读了很多关于回调、承诺等的信息，但似乎无法理解和/或将其应用于这个特定的例子。

谢谢你的帮助！ 非常感激！

exports.fetchData = functions.https.onCall(async (data, context) => {
    const urlLib = require("url");
    const pathLib = require("path"); 

    //Check for authentication
    if (!context.auth) { //not authed -> error
        throw new functions.https.HttpsError('failed-precondition', 'The function must be called ' +
            'while authenticated.');
    } else { //authed -> good to go

        var salesLeadId = data.salesLeadId; //grab leadID which is passed from my android app into this function (unique ID to identify the record I need to update)       

        try {    
            //Example URL
            let url = 'http://www.example.com'; //I left out code here where I build a custom URL etc.

            const browser = await puppeteer.launch(); 
            const [page] = await browser.pages();
            //Emulate Headless Chrome instance        
            await page.emulate({
                name: 'Desktop 1920x1080',
                userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36',
                viewport: {
                width: 1920,
                height: 1080
                }
            });
            //Opens Page, and waitws until loading is done
            await page.goto(url, { waitUntil: 'networkidle0' });

            //Read Data from web page and return as data object
            var data = await page.evaluate(() => {

                var scrapedPhoto = document.querySelector("#imgExamplePhoto").getAttribute('src'); //This is the external URL to the image
                // [...] grabbing other info here and adding it to "data"
                var accNo = "123456789"; //Example Data but in reality also fetched via document.queryselector
                var pId "12-44-66-88-88"; //Example Data but in reality also fetched via document.queryselector
                // etc...

                return { scrapedPhoto, accNo, pId }; //return all scraped data in var data

            });

            await browser.close();

            //below function is to grab the external URL, save it to Firestore Storage and return a Signed URL which I would then save with my lead document
            var uploadedPhotoUrl = await saveToStorage(data.scrapedPhoto); // THIS IS WHERE MY PROBLEM IS....the code keeps going. The function eventually returns the correct URL but way too late.

            //Firestore Document Reference for record to be updated
            let leadRef = admin.firestore().collection("sales_leads").doc(salesLeadId);

            //I've changed this in every way that I can think of by trial and error (i.e. tried chaining "thens", but unsuccessfully). I assume first I need to resolve the saveStorage function before proceeding to update my firestore document
            return leadRef.update({ //Here is where I'm going back to my Firestore Document and update it with this "new data"
                photo: uploadedPhotoUrl, //Problem: this is undefined because my code does NOT wait on "saveToStorage" above (Previously this was just the external "scrapedPhotoUrl" and thus worked fine. But instead of saving the external URL, I'm trying to save this image to firestore to avoid constant calls to their web page)
                pId: data.pID,
                accNo: data.accNo
            }).then(writeResult => {
                console.log(`Sales Lead updated with Data on: ${writeResult.writeTime.toDate()}`);
                return `Sales Lead updated with Data on: ${writeResult.writeTime.toDate()}`
            });        

        } catch (err) {
            console.error(err);
            return 'Error';
        }


    }
});

async function saveToStorage(fileUrl) {
    var storage = admin.storage();
    var fetch = require("node-fetch");
    var urlLib = require("url");
    var pathLib = require("path");
    //Get File Name from provided URL
    var parsed = urlLib.parse(fileUrl);
    var fileName = pathLib.basename(parsed.pathname);

    //Create Storage Reference with new File Name
    var bucket = storage.bucket('gs://myprojetname.appspot.com');
    var folderPath = 'sales/photos/';
    var internalFilePath = folderPath + fileName;
    var file = bucket.file(internalFilePath);

    //Fetch file from url
    return await fetch(fileUrl).then(res => {
      const contentType = res.headers.get('content-type');
      const writeStream = file.createWriteStream({
        metadata: {
          contentType
        }
      });
      return res.body.pipe(writeStream)
        .on('finish', () => {
          console.log('Image saved')
          return getDownloadURL(file); //so this eventually returns the corret URL, but by the time this "comes back" my main function has finished execution
        })
        .on('error', err => {
          writeStream.end();
          return console.error(err);
        });

    });


  }

//Get Signed Download URL from Firestore Storage. This works fine for me.
  function getDownloadURL(file) {     
    const config = {
        action: 'read',
        expires: '10-30-2050'
      };

    return file.getSignedUrl(config).then((downloadUrl) => {
      let result = downloadUrl[0];
      return result;
    }).catch(error => {
      console.error(error);
      return 'Error';
    });

  }

Answer 1

所以我认为'我正在到达那里'。 我意识到问题似乎出在我的“saveToStorage”function 中，正如我的日志记录 output 所示。 （console.log 在结果返回之前发布）。

现在我基本上（我认为）以正确的顺序排列它。

保存到存储 function =>

[...]
  return await fetch(fileUrl).then(res => {
    const contentType = res.headers.get('content-type');
    const writeStream = file.createWriteStream({
      metadata: {
        contentType
      }
    });
    let p = new Promise((resolve, reject) => {
      res.body.pipe(writeStream).on('finish', function() {
        resolve(file);
      });
      res.body.pipe(writeStream).on('error', function () {
        reject();
      });
    });

    return p.then(function(file) {
      console.log('Image saved')
      return getDownloadURL(file);
    });

  });
[...]

我在这个function里面加了一个Promise，在返回数据前解析。 我得到了正确的 URL 并且正确的存储（签名）url 被写入/更新到我的 firestore 文档中......但是......

我的图像只写了大约一半。 下半部分是灰色像素。 :head scratching: (之前图像很好，但是url回来得太晚了。现在url“及时”返回了，但图像似乎不完整。)

编辑：我要把这个标记为答案并用我的新问题打开一个新问题。 我相信我原来的问题在这里得到了解决。 （编辑：明天）