為什么我的異步 function 總是返回未定義？

Question

似乎我使用異步錯誤，有人能發現我做錯了什么嗎？

這是我正在等待的 function：

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export async function firebaseAcceptTradeOffer(tradeOfferID, userData) {
  var tradeInstanceID;
  var senderID;
  var receiverID;
  var senderItemsTemp;
  var receiverItemsTemp;
  var response;
  var tradeOffer = db.collection("tradeOffers").doc(tradeOfferID);
  return tradeOffer
    .get()
    .then((doc) => {
      senderItemsTemp = doc.data().sendersItems;
      receiverItemsTemp = doc.data().receiversItems;
      senderID = doc.data().senderID;
      receiverID = doc.data().receiverID;
    })
    .then(() => {
      var itemInTrade = false;
      senderItemsTemp.forEach((item) => {
        db.collection("listings")
          .doc(item.itemID)
          .get()
          .then((doc) => {
            if (doc.data().status !== "listed") {
              itemInTrade = true;
            }
          })
          .then(() => {
            receiverItemsTemp.forEach((item) => {
              db.collection("listings")
                .doc(item.itemID)
                .get()
                .then((doc) => {
                  if (doc.data().status !== "listed") {
                    itemInTrade = true;
                  }
                })
                .then(() => {
                  if (itemInTrade) {
                    tradeOffer.update({
                      status: "declined",
                    });
                    return false;
                  } else {
                    db.collection("trades")
                      .add({
                        tradeOfferID: tradeOfferID,
                        senderTradeStatus: {
                          created: true,
                          sentToSeekio: "current",
                          inspection: false,
                          sentToPartner: false,
                        },
                        receiverTradeStatus: {
                          created: true,
                          sentToSeekio: "current",
                          inspection: false,
                          sentToPartner: false,
                        },
                        postagePhotos: [],
                        inspectionPhotos: [],
                        senderPaid: false,
                        receiverPaid: false,
                        senderUploadedProof: false,
                        receiverUploadedProof: false,
                        senderID: senderID,
                        receiverID: receiverID,
                        messages: [
                          {
                            message: `Trade created. A representative, will message this chat shortly with instructions and postage address. If you would like more information about the trading process, head to seekio.io/help. Thank you for using Seekio!`,
                            sender: "System",
                            timestamp: firebase.firestore.Timestamp.fromDate(
                              new Date()
                            ),
                          },
                        ],
                      })
                      .then((docRef) => {
                        tradeInstanceID = docRef.id;
                        tradeOffer
                          .set(
                            {
                              status: "accepted",
                              tradeInstanceID: docRef.id,
                            },
                            { merge: true }
                          )
                          .then(() => {
                            var receiver = db.collection("users").doc(senderID);
                            var notification = {
                              from: auth.currentUser.uid,
                              fromUsername: userData.username,
                              type: "tradeOfferAccepted",
                              time: firebase.firestore.Timestamp.fromDate(
                                new Date()
                              ),
                              seen: false,
                            };
                            receiver
                              .update({
                                notifications: firebase.firestore.FieldValue.arrayUnion(
                                  notification
                                ),
                              })
                              .then(() => {
                                response = {
                                  sendersItems: senderItemsTemp,
                                  receiversItems: receiverItemsTemp,
                                };
                                return response;
                              });
                          });
                      })
                      .catch((err) => console.log(err));
                  }
                });
            });
          });
      });
    });
}

這就是我所說的：

  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  async function acceptTradeOffer() {
    var tradeOfferID = currentTradeFocus;
    var senderID = "";
    setLoading("loading");
    if (userData !== null && tradeOfferID !== "") {
      const response = await firebaseAcceptTradeOffer(
        currentTradeFocus,
        userData
      );
      console.log(
        "RESPONSE FROM FIREBASE SERVICE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>: ",
        response
      );
      if (!response) {
        setErrorMsg("One of the selected items is no longer available.");
      } else if (
        response.sendersItems !== null &&
        response.receiversItems !== null
      ) {
        setSenderItems(response.sendersItems);
        setReceiverItems(response.receiversItems);
        toggleConfirmScreen("cancel");
        setLoading("idle");
        setItemsSet(true);
      }
      fetch(
        "https://europe-west2-seekio-86408.cloudfunctions.net/sendMail?type=tradeUpdate&userID=" +
          senderID
      ).catch((err) => {
        console.log(err);
        setLoading("idle");
      });
    }
  }

所以基本上我想 go 並檢查這個“交易”中的任何項目是否不等於“列出”（這意味着它們不可用，我想返回false ，如果沒有，那么我返回項目數組所以交易可以繼續。

編輯：我試圖重新調整它，它只工作了一半。 頂級看看我正在嘗試做的事情：

User wants to accept a trade offer for some items >
Check through all items to make sure they are available and not sold >
If so, accept the trade >
Then once its accepted, go and cancel all remaining trade offers that include items from this accepted trade, cause they are not available anymore.


//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export async function firebaseAcceptTradeOffer(tradeOfferID, userData) {
  console.log(
    "----- starting firebaseAcceptTradeOffer--------- ",
    unavailableItem
  );
  //==============
  var tradeInstanceID;
  var senderID;
  var receiverID;
  var senderItemsTemp;
  var receiverItemsTemp;
  var unavailableItem = false;
  var response;
  var itemsArray;
  var notListed = false;
  //==============
  var tradeOffer = db.collection("tradeOffers").doc(tradeOfferID);

  unavailableItem = tradeOffer
    .get()
    .then((doc) => {
      senderID = doc.data().senderID;
      receiverID = doc.data().receiverID;
      itemsArray = doc.data().sendersItems.concat(doc.data().receiversItems);
    })
    .then(() => {
      itemsArray.forEach((item) => {
        db.collection("listings")
          .doc(item.itemID)
          .get()
          .then((doc) => {
            if (doc.data().status !== "listed") {
              notListed = true;
            }
          });
      });
    })
    .then(() => {
      return notListed;
    });

  console.log(
    "-----unavailableItem at the end of method --------- ",
    unavailableItem
  );

  //^^^^^^^^^^ here i am getting a promise result of false (which is correct) but HOW CAN I ACCESS IT

  if (unavailableItem) {
    tradeOffer.update({
      status: "declined",
    });
    return false;
  } else {
    response = await createTrade(
      tradeOffer,
      tradeOfferID,
      senderID,
      receiverID,
      userData.username
    );
    console.log("response from createTrade", response);
    return response;
  }
}

我得到了一個 promise object ，上面的值是false 。 False 是我期望的正確值，但我怎樣才能訪問它？ 它的形式是 promise object？

Answer 1

我手頭有一些時間，所以讓我們分解一下。

變量注釋

如果您不使用 TypeScript（即使您是），我強烈建議您將類型插入變量名稱中。

db                # ✔ by convention, either firebase.database() or firebase.firestore()
tradeOffer        # ❓ type unclear, could be a number, an object, a string, etc
tradeOfferDocRef  # ✔ a DocumentReference
trades            # ❓ type unclear, plural implies a collection of some sort
tradesColRef      # ✔ a CollectionReference

你可能還會遇到這些：

doc               # ❓ by convention, a DocumentSnapshot, but with unknown data
tradeDoc          # ✔ implies a DocumentSnapshot<TradeData> (DocumentSnapshot containing trade data)

僅使用doc時，您需要查看它用於此DocumentSnapshot所包含內容的上下文的位置。

db.collection('trades').doc(tradeOfferID).get()
  .then((doc) => { // contents implied to be TradeData
    const data = doc.data();
  });
// or
tradeDocRef.get()
  .then((doc) => { // contents implied to be TradeData
    const data = doc.data();
  });

您應該根據需要重命名doc ，尤其是在使用async / await語法時，因此您不會遇到以下情況：

const doc = await db.collection('trades').doc(tradeOfferID).get();
/* ... many lines ... */
const senderID = doc.get("senderID"); // what was doc again?

正如您在問題中標記reactjs ，這意味着您使用的是現代 JavaScript。

放棄任何使用var並將其替換為塊范圍的版本： const （防止重新分配變量）或let （類似於var ， 但不完全）。 這些更安全，可以防止意外覆蓋不應該覆蓋的內容。

您還可以使用 Object 解構來分配變量。

const senderID = doc.data().senderID;
const receiverID = doc.data().receiverID;
const itemsArray = doc.data().sendersItems.concat(doc.data().receiversItems);

可以變成：

const { senderID, receiverID, sendersItems, receiversItems } = doc.data();
const itemsArray = sendersItems.concat(receiversItems);

如果您只需要文檔中的單個屬性，則應使用DocumentSnapshot#get()而不是DocumentSnapshot#data() ，這樣它只會解析您想要的字段而不是整個文檔的數據。

function getUserAddress(uid) {
  return firebase.firestore()
    .collection('users')
    .doc(uid)
    .get()
    .then(userDoc => userDoc.get("address")); // skips username, email, phone, etc
}

關於 Promise 的注釋

var senderID;
var receiverID;
var itemsArray;

tradeOfferDocRef
  .get()
  .then((doc) => {
    senderID = doc.data().senderID;
    receiverID = doc.data().receiverID;
    itemsArray = doc.data().sendersItems.concat(doc.data().receiversItems);
  })
  .then(() => {
    /* use results from above */
  });

雖然上面的代碼塊按預期運行，但當您像這樣擁有許多這樣的變量時，它們的設置時間和位置就變得不清楚了。

它還會導致這樣的問題，您認為變量具有值：

var senderID;
var receiverID;
var itemsArray;

tradeOfferDocRef
  .get()
  .then((doc) => {
    // this line runs after the line below
    senderID = doc.data().senderID;
    receiverID = doc.data().receiverID;
    itemsArray = doc.data().sendersItems.concat(doc.data().receiversItems);
  });

// this line before the line above
console.log(senderID); // will always log "undefined"

這可以通過以下三種方式之一來避免：

• 返回數據以傳遞給下一個處理程序（在此示例中您不會使用它，僅當下一個then()處理程序在其他地方時）：

tradeOfferDocRef
  .get()
  .then((doc) => {
    const { senderID, receiverID, sendersItems, receiversItems } = doc.data();
    const itemsArray = sendersItems.concat(receiversItems);
    return { senderID, receiverID, itemsArray }; // pass to next step
  })
  .then((neededData) =>
    /* use neededData.senderID, neededData.receiverID, etc */
  });

• 在同一處理程序中使用數據：

tradeOfferDocRef
  .get()
  .then((doc) => {
    const { senderID, receiverID, sendersItems, receiversItems } = doc.data();
    const itemsArray = sendersItems.concat(receiversItems);

    /* use results from above */
  });

• 使用async - await語法：

const tradeDoc = await tradeOfferDocRef.get();

const { senderID, receiverID, sendersItems, receiversItems } = tradeDoc.data();
const itemsArray = sendersItems.concat(receiversItems);

/* use results from above */

寫入 Firestore

您當前的代碼包含以下步驟：

1. Get the trade offer document</li>
2. If successful, pull out the sender and receiver's IDs, along with any items in the trade
3. If successful, do the following for each item in the sender items array:
  a) Check if any of the sender's items are unavailable</li>
  b) If successful, do the following for each item in the receiver items array:
    - If **any item** was unavailable prior to this, decline the trade & return `false`.
    - If all items **so far** are available, do the following:
      a) Create a document containing information about the trade with the needed data
      b) If successful, edit the trade offer document to accept it
      c) If successful, create a notification for the receiver
      d) If successful, return the traded items
      e) If any of a) to d) fail, log the error and return `undefined` instead
4. Return `undefined`

在上述步驟中，您可以看到 promise 鏈接存在一些問題。 但除此之外，您還可以看到您是一個接一個地創建和編輯文檔，而不是一次性（“原子地”）創建和編輯文檔。 如果其中任何一個寫入失敗，您的數據庫最終會出現未知的 state。 例如，您可以創建並接受交易，但未能創建通知。

要以原子方式寫入數據庫，您需要使用批處理寫入，將一堆更改捆綁在一起，然后將它們發送到 Firestore。 如果其中任何一個失敗，則不會更改數據庫中的數據。

接下來，您將用戶的通知存儲在他們的用戶文檔中。 對於少量通知，這很好，但如果您只想提取地址或電話號碼，如上一節中的示例，您是否需要下載所有這些通知？ 我建議將它們分成自己的文檔（例如/users/{someUserId}/metadata/notifications ），但最好是他們自己的集合（例如/users/{someUserId}/notifications/{someNotificationID} ）。 通過將它們放在自己的集合中，您可以查詢它們並使用QuerySnapshot#docChanges來同步更改並使用 Cloud Firestore 觸發器發送推送通知。

重構 Function

1. Get the trade offer document</li>
2. Once the retrieved, do the following depending on the result:
  - If failed or empty, return an error
  - If successful, do the following:
    a) Pull out the sender and receiver's IDs, along with any items in the trade.
    b) For each item in the trade, check if any are unavailable and once the check has completed, do the following depending on the result:
      - If any item is unavailable, do the following:
        a) Decline the trade
        b) Return the list of unavailable items
      - If all items are available, do the following:
        a) Create a new write batch containing:
          - Create a document about the trade
          - Edit the trade offer document to accept it
          - Create a notification for the receiver
        b) Commit the write batch to Firestore
        c) Once the commit has completed, do the following depending on the result:
          - If failed, return an error
          - If successful, return the traded items and the trade's ID

因為這里的步驟相互依賴，所以這是使用async / await語法的好選擇。

要看到這一點，請仔細研究：

import * as firebase from "firebase-admin";

// insert here: https://gist.github.com/samthecodingman/aea3bc9481bbab0a7fbc72069940e527

async function firebaseAcceptTradeOffer(tradeOfferID, userData) {
  const tradeOfferDocRef = db.collection("tradeOffers").doc(tradeOfferID);

  const tradeDoc = await tradeOfferDocRef.get();

  const { senderID, receiverID, sendersItems, receiversItems } =
    tradeDoc.data();
  const itemsArray = sendersItems.concat(receiversItems);

  // TODO: Check if this is an accurate assumption
  if (sendersItems.length == 0 || receiversItems.length == 0) {
    success: false,
    message: "One-sided trades are not permitted",
    detail: {
      sendersItemsIDs: sendersItems.map(({ itemID }) => itemID),
      receiversItemsIDs: receiversItems.map(({ itemID }) => itemID),
    },
  };

  const listingsColQuery = db
    .collection("listings")
    .where("status", "==", "listed");

  const uniqueItemIds = Array.from(
    itemsArray.reduce(
      (set, { itemID }) => set.add(itemID),
      new Set()
    )
  );

  const foundIds = {};

  await fetchDocumentsWithId(
    listingsColQuery,
    uniqueItemIds,
    (listingDoc) => {
      // if here, listingDoc must exist because we used .where("status") above
      foundIds[listingDoc.id] = true;
    }
  );

  const unavailableItemIDs = uniqueItemIds
    .filter(id => !foundIds[id]);

  if (unavailableItems.length > 0) {
    // one or more items are unavailable!
    await tradeOfferDocRef.update({
      status: "declined",
    });
    return {
      success: false,
      message: "Some items were unavailable",
      detail: {
        unavailableItemIDs,
      },
    };
  }

  const tradeDocRef = db.collection("trades").doc();
  const tradeInstanceID = tradeDocRef.id;

  const batch = db.batch();

  batch.set(tradeDocRef, {
    tradeOfferID,
    senderTradeStatus: {
      created: true,
      sentToSeekio: "current",
      inspection: false,
      sentToPartner: false,
    },
    receiverTradeStatus: {
      created: true,
      sentToSeekio: "current",
      inspection: false,
      sentToPartner: false,
    },
    postagePhotos: [],
    inspectionPhotos: [],
    senderPaid: false,
    receiverPaid: false,
    senderUploadedProof: false,
    receiverUploadedProof: false,
    senderID,
    receiverID,
    messages: [
      {
        message: `Trade created. A representative, will message this chat shortly with instructions and postage address. If you would like more information about the trading process, head to seekio.io/help. Thank you for using Seekio!`,
        sender: "System",
        timestamp: firebase.firestore.Timestamp.fromDate(new Date()),
      },
    ],
  });

  batch.set(
    tradeOfferDocRef,
    {
      status: "accepted",
      tradeInstanceID,
    },
    { merge: true }
  );

  const receiverNotificationRef = db
    .collection("users")
    .doc(senderID)
    .collection("notifications")
    .doc();

  batch.set(receiverNotificationRef, {
    from: auth.currentUser.uid,
    fromUsername: userData.username,
    type: "tradeOfferAccepted",
    time: firebase.firestore.Timestamp.fromDate(new Date()),
    seen: false,
  });

  await batch.commit();

  return {
    success: true,
    message: "Trade accepted",
    detail: {
      tradeID: tradeInstanceID,
      senderItems,
      receiversItems,
    },
  };
}

用法：

try {
  const tradeResult = await firebaseAcceptTradeOffer(someTradeId);
} catch (err) {
  // if here, one of the following things happened:
  //  - syntax error
  //  - database read/write error
  //  - database rejected batch write
}

Answer 2

通常，當您返回無法解決的 promise 時，您必須等待其結果。 此外，您必須從 promise then鏈中返回一個值，至少最后一個 .then .then()需要返回一個值，這也可以在.finally()方法中完成。

使用從任何 firebase 資源中獲取，實時、firestore 和存儲都是異步進程，必須等待。 在您的情況下，您錯過了等待退貨的機會：

 var tradeOffer = db.collection("tradeOffers").doc(tradeOfferID);
  return tradeOffer

並且您似乎沒有在 your.then() 語句中返回任何內容，我建議您完全重寫您正在嘗試的內容，以便您在需要時返回值。