我怎样才能使我的第二块链触发？

Question

我有一些用于将一堆照片上传到服务器的代码。

整个代码可以分为三部分：

• 从 input="files" 捕获图片并将它们放在一个可验证的文件中，直到我调用方法 uploadPictures()。

• 然后我正在上传照片并将网址推送到数组中，以便我以后可以使用它们

• 最后，当上传结束时，我有了想要更新数据库（Firestore）中某个文档的链接

问题在于前两部分的代码运行良好。我可以让这个链既不使用 async/await 也不使用 Promises

async uploadPictures() {

    let loop = new Promise( result => {

      this.files.forEach((file, index) => {

        let path: string = `items/${Date.now()}_${this.files[index].name}`;

        let ref = this.storage.ref(path);

        ref.put(file).then(snapshot => {
          snapshot.ref.getDownloadURL().then(downloadLink => {
            this.url.push(downloadLink);
            console.log('Image is uploaded successfully and available at: ' + downloadLink);
          })
        });
      });

    }).then( () => {

      console.log('hello from here!');
      console.log(this.url);
      this.firestore.collection('items').doc(this.itemId).update({ pics: this.url });

    })


  }

我将不胜感激任何提示或建议！

Answer 1

所以我在这里看到了你如何做承诺的多个问题。如果您是新手，很容易弄错，所以不要为此感到难过。

所以第一个问题是您调用new Promise 的方式。此构造函数采用具有两个参数的函数：resolve 和 reject。这些是在调用时完成或拒绝承诺的函数。你什么都不做，所以第一个承诺永远不会完成。

您遇到的第二个问题是您在 Promise 调用中进行了 Promise 调用，但您永远不会将 Promise 返回到调用链中，因此事情不会正确地链接在一起。

在您的情况下，我认为new Promise() 无论如何都不是正确的构造。我认为你需要简单地传递一个当你在循环内调用的所有承诺完成时完成的承诺。所以你需要做的是在循环中构造一个包含所有 Promise 的数组，然后在它们上调用 Promise.all 以获得一个新的 Promise，当数组中的所有 Promise 都完成时，它就会完成。

此外，如果您只是在任何地方都使用 async/await 而不是显式使用 Promise 和 then 调用，那么整个过程会容易得多。 :-)

我认为使用显式承诺您想要做的事情看起来像这样：

// Don't need async if not awaiting
uploadPictures() {
    // Build array of promises for each item in loop.
    // Array.map is an easy way to do this.
    let loop = this.files.map((file, index) => {
        let path: string = `items/${Date.now()}_${this.files[index].name}`;
        let ref = this.storage.ref(path);

        // Inner promise - MUST RETURN THIS to chain properly
        // Also, prefer flattened promise chains to nested one
        return ref.put(file)
        .then(snapshot => snapshot.ref.getDownloadURL())
        .then(downloadLink => {
            this.url.push(downloadLink);
            console.log('Image is uploaded successfully and available at: ' + downloadLink);
        });
    });
    return Promise.all(loop)
    .then(() => {
        console.log('hello from here!');
        console.log(this.url);
        return this.firestore.collection('items').doc(this.itemId).update({ pics: this.url });
    });
}

当使用async/await 时，这会变得更干净：

async uploadPictures() {
    // Build array of promises for each item in loop.
    // Array.map is an easy way to do this.
    let loop = this.files.map(async (file, index) => {
        let path: string = `items/${Date.now()}_${this.files[index].name}`;
        let ref = this.storage.ref(path);

        // await lets us avoid explicit returns or chaining
        let snapshot = await ref.put(file);
        let downloadUrl = await snapshot.ref.getDownloadURL();
        this.url.push(downloadLink);
        console.log('Image is uploaded successfully and available at: ' + downloadLink);
    });

    await Promise.all(loop);
    console.log('hello from here!');
    console.log(this.url);
    await this.firestore.collection('items').doc(this.itemId).update({ pics: this.url });
}

希望这会有所帮助！