如何在另一个 Promise 中返回一个 Promise 的值？

Question

我试图在一个 promise 中返回一个 promise 函数的值。仍然很新的承诺，所以任何建议都非常感谢！

// card.service.ts

getCard(cardId: string): DocumentData {
    return firebase.firestore().collection('users').doc(this.currentUserId)
        .collection('cardsList').doc(cardId)
        .get()
        .then((docSnapShot) => {
            console.log((docSnapShot));
            return docSnapShot.data();
        },
        (err) => {
            console.log(err);
        });
  }

addCardToWallet(userId: string, cardId: string, dataObject: DocumentData) {
      return firebase.firestore().collection('users').doc(userId)
          .collection('walletList')
          .doc(cardId)
          .set(
              dataObject
          );
  }

// scanner.component.ts
scanCode() {
   this.barcodeScanner.scan(
          {
           showFlipCameraButton : true, // iOS and Android
           showTorchButton : true, // iOS and Android
           prompt : 'Scan a Kardbox QR' // Android
          }
     ).then((barcodeData) => {
         this.cardService.getCard(barcodeData.text)
             .then((data) => {
               // I want to add this to the database first

               this.cardService.addCardToWallet(this.currentUserId, barcodeData.text, data);

              // After adding values to database, navigate to other page

              this.router.navigate(['/home/wallet']);
        });
     });
 }

我得到的输出是barcodeData 的值，我不知道为什么会这样。

Answer 1

我认为你应该尝试异步等待，替换：

this.barcodeScanner.scan(
        {
          showFlipCameraButton : true, // iOS and Android
          showTorchButton : true, // iOS and Android
          prompt : 'Scan a Kardbox QR' // Android
        }
    ).then((barcodeData) => {
        this.cardService.getCard(barcodeData.text)
            .then((data) => {
              // I want to add this to the database first
          this.cardService.addCardToWallet(this.currentUserId, barcodeData.text, data);

          // After adding values to database, navigate to other page

          this.router.navigate(['/home/wallet']);
    });
});

与：

const barcodeData = await this.barcodeScanner.scan(
  {
    showFlipCameraButton : true, // iOS and Android
    showTorchButton : true, // iOS and Android
    prompt : 'Scan a Kardbox QR' // Android
  },
);
const data = await this.cardService.getCard(barcodeData.text);

this.cardService.addCardToWallet(this.currentUserId, barcodeData.text, data);
this.router.navigate(['/home/wallet']);

并且不要忘记在 scancode() 方法之前添加异步。

Answer 2

您应该在 getCard(cardId: string) 函数中返回一个承诺

getCard(cardId: string): Promise<DataType or any> {
    const promise = new Promise((resolve,reject) => { 
         firebase.firestore().collection('users').doc(this.currentUserId)
        .collection('cardsList').doc(cardId)
        .get()
        .then((docSnapShot) => {
            console.log((docSnapShot));
            resolve(docSnapShot.data());
        },
        (err) => {
            console.log(err);
        });
    });
    return promise;
  }

如果要在数据添加到数据库后进行导航，则应将 router.navigate 放入 addCardToWallet 方法的回调中

this.cardService.addCardToWallet(this.currentUserId, barcodeData.text,data).then(res => {
      router.navigate(/somwhere)
});

Answer 3

也许这会有所帮助。如果没有请告诉我。

scanCode( ) {
    this.barcodeScanner.scan({
        showFlipCameraButton: true,
        showTorchButton: true,
        prompt: 'Scan a Kardbox QR'
    })
    .then( ( barcodeData ) => {
        this.cardService.getCard( barcodeData.text )
            .then( ( data ) => {
               // addCardToWallet returns a promise, right? Wait for it to return
               this.cardService.addCardToWallet( this.currentUserId, barcodeData.text, data )
                   .then( ( ) => {
                       // And after the card is added, tell the router to navigate
                       this.router.navigate([ '/home/wallet' ]);
                   })
            });
     })
     // Just in case, I recommend you to catch any error that might arise in the promise chain
     .catch( ( error ) => {
         console.error( 'Oops, something failed: "' + error + '"' );
     });
 }