如何使用JavaScript Promise Chaining实现Firebase认证后获取API Key并执行函数？

Got it, let's break this down step by step—Promise chaining is exactly what you need here because each task depends on the result of the one before it. Here's a clear, working implementation tailored to your three requirements:

Full Working Code Example #

First, make sure you've initialized Firebase Auth and Realtime Database (adjust the config to match your project):

// Initialize Firebase (replace with your project config)
import { initializeApp } from "firebase/app";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
import { getDatabase, ref, get } from "firebase/database";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);

// Define your final function (uses the fetched API Key)
function executeFinalFunction(apiKey) {
  console.log("Executing final logic with API Key:", apiKey);
  // Add your actual business logic here (e.g., call a third-party API)
}

Now the Promise chain that ties everything together:

// Helper function to handle authentication (returns a Promise)
function authenticate(email, password) {
  return signInWithEmailAndPassword(auth, email, password);
}

// The main workflow chain
authenticate("user@example.com", "user-password-123")
  .then((userCredential) => {
    // Step 1: Grab the authenticated user's ID
    const userId = userCredential.user.uid;
    console.log("Authenticated User ID:", userId);
    // Pass the userId to the next step
    return userId;
  })
  .then((userId) => {
    // Step 2: Fetch the API Key from the database
    const apiKeyRef = ref(db, `app/${userId}`);
    // get() returns a Promise, so we return it to continue the chain
    return get(apiKeyRef);
  })
  .then((snapshot) => {
    // Step 3: Extract the API Key and run the final function
    if (snapshot.exists()) {
      const apiKey = snapshot.val().apiKey; // Adjust if your key is stored differently
      executeFinalFunction(apiKey);
    } else {
      throw new Error("No API Key found for this user in the database");
    }
  })
  .catch((error) => {
    // Catch ANY error from any step in the chain
    console.error("Workflow failed:", error.message);
    // Add user-facing error handling here (e.g., show a toast message)
  });

What's Happening in Each Step? #

Let’s break down the chain to make sure you follow along:

1. Authentication: signInWithEmailAndPassword returns a Promise that resolves to a UserCredential object. We pull the user’s uid from this and pass it to the next .then().
2. Database Fetch: We create a reference to the app/{userId} node, then use get() to fetch its data. Since get() returns a Promise, returning it lets the chain wait for the database call to finish.
3. Final Function Execution: Once we have the database snapshot, we check if data exists, extract the API Key, and run your final function.
4. Error Handling: The single .catch() at the end catches errors from any step—authentication failures, database read issues, missing API keys, etc.—so you don’t have to handle errors in every .then().

Customization Tips #

• Different Auth Methods: If you’re using Google Sign-In or another provider, replace signInWithEmailAndPassword with the appropriate method (e.g., signInWithPopup(getAuth(), googleProvider)).
• Database Structure: If your API Key is stored directly under the app/{userId} node (not as a child field), use snapshot.val() instead of snapshot.val().apiKey.
• UX Improvements: Add loading states or user feedback in each .then() (e.g., show a spinner while authenticating, then while fetching the API key).

Alternative: Async/Await (Optional) #

If you prefer synchronous-style code over explicit Promise chaining, here’s the equivalent using async/await (it’s just syntactic sugar for Promises):

async function runUserWorkflow(email, password) {
  try {
    // Step 1: Authenticate
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    const userId = userCredential.user.uid;
    
    // Step 2: Fetch API Key
    const apiKeyRef = ref(db, `app/${userId}`);
    const snapshot = await get(apiKeyRef);
    
    if (!snapshot.exists()) throw new Error("No API Key found");
    
    // Step 3: Run final function
    executeFinalFunction(snapshot.val().apiKey);
  } catch (error) {
    console.error("Workflow failed:", error.message);
  }
}

// Call the workflow
runUserWorkflow("user@example.com", "user-password-123");

内容的提问来源于stack exchange，提问作者Chris