时间戳

首页 > 解决方案 > 嵌套 .then() 函数

javascript - 嵌套 .then() 函数

问题描述

嵌套多个 then 函数是不好的做法吗？说“执行这个函数，完成后，执行这个”（等等）似乎很合乎逻辑，但代码看起来很糟糕。

如果它有帮助，我最初在 firestore 获取用户详细信息然后获取文档的上下文中进行了此查询

firebaseApp.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
   //If error    
}).then(()=>{   
    firebaseApp.firestore().collection(collectionName).where("associatedID", "==", authID).get().then((snapshot)=>{
        snapshot.docs.forEach(doc => {
            //Do stuff with data that we've just grabbed
        })
    }).then(()=>{
        //Tell the user in the UI
    });
});

有替代品吗？一个浮现在脑海的是这样的

var functionOne = () =>{
     console.log("I get called later");
}
var promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
    resolve('foo');
  }, 3000);
});

promise1.then(function(value) {
  functionOne();
});

但即便如此，在几个 .then() 之后它似乎也会变得复杂

标签： javascriptecmascript-6es6-promise

解决方案

从第一个 outer 返回 Promise .then，然后在第二个 outer 中使用 resolve 值.then，没有任何嵌套.then的 s：

firebaseApp.auth().signInWithEmailAndPassword(email, password)
  .then(()=>{   
    return firebaseApp.firestore().collection(collectionName).where("associatedID", "==", authID).get()
  })
  .then((snapshot) => {
    snapshot.docs.forEach(doc => {
      //Do stuff with data that we've just grabbed
    });
    //Tell the user in the UI
  })
  .catch((error) => {
    // handle errors
  });

确保不要catch太早——如果链中的任何地方出现错误，通常您会想要停止正常执行并直接进入最后（例如，告诉用户有错误）。

如果您担心代码的可读性，请考虑使用async/ await（并为旧版浏览器转译您的生产代码）：

// in an async function:
try {
  await firebaseApp.auth().signInWithEmailAndPassword(email, password);
  const snapshot = await firebaseApp.firestore().collection(collectionName).where("associatedID", "==", authID).get()
  snapshot.docs.forEach(doc => {
    //Do stuff with data that we've just grabbed
  });
  //Tell the user in the UI
} catch(error) {
  // handle errors
}

推荐阅读