用 .then 链接 await 并尝试 catch 语法

Question

我有一个提交功能

const onSubmit = async (creditCardInput) => {
const { navigation } = this.props;
this.setState({ submitted: true });
let creditCardToken;

try {
  creditCardToken = await getCreditCardToken(creditCardInput);
  if (creditCardToken.error) {
    this.setState({ submitted: false});
    return;
  }
} catch (e) {
  this.setState({ submitted: false });
  return;
}


try {
  const obj = await subscribeUser(creditCardToken);
  console.log('returned obj', obj);
  try {
    const docRef = await this.db.collection("users").doc(this.user.email).set({
      id: this.user.uid,
      subscriptionId: obj.customerId,
      active: true
    });
    console.log("Document written with ID: ", docRef);
    this.navigateToScreen('HomeScreen');
  } catch (e) {
    console.log("Error adding document: ", e);
  }
} catch (error) {
  console.log('catch error', error);
  this.setState({ submitted: false, error: SERVER_ERROR, message: error });
}  
};

这是正常工作的 - 当 this.db.collection 调用失败时，捕获被实现意味着它会注销“添加文档时出错：”，e 见下面的代码sn-p

  try {
    const docRef = await this.db.collection("users").doc(this.user.email).set({
      id: this.user.uid,
      subscriptionId: obj.customerId,
      active: true
    });
    console.log("Document written with ID: ", docRef);
    this.navigateToScreen('HomeScreen');
  } catch (e) {
    console.log("Error adding document: ", e);
  }

但是，当我以不同的方式实现 subscribe 用户函数时（见下文），我不再使用 try catch 而是使用 .then 内部函数最终失败并且执行外部 catch 语句意味着它注销console.log('捕获错误', 错误);什么时候应该退出 console.log("Error added document:", errors); 这是为什么？它们不应该以相同的方式工作吗，这意味着上面和下面的代码 sn-p 应该以相同的方式工作 见下面的代码

await subscribeUser(creditCardToken).then((obj)=> {
this.db.collection("users").doc(this.user.email).set({
    id: this.user.uid,
    subscriptionId: obj.customerId,
    active: true
}).then((docRef) => {
    console.log("Document written with ID: ", docRef);
    this.navigateToScreen('HomeScreen');
}).catch((errors) => {
    console.log("Error adding document: ", errors);
});
}).catch((error) => {
    console.log('catch error', error);
    this.setState({ submitted: false message: error });
});

当 this.db.collections 成功解析 .then 时，只是添加了一条注释执行外部捕获而不是内部捕获

还向 this.db.collection 函数添加 return 并删除 await 对结果没有影响

Answer 1

有两种方法可以处理这个问题 - 将您的 set 函数转换为使用 async/await 语法，或者 return 您设置的函数到 subscribeUser 函数的下一个 then 声明。我会同时展示两者，但我更喜欢第二个，因为我不喜欢将 async/await 与 then/catch 混合使用。

const tempThis = this
subscribeUser(creditCardToken).then((obj)=> {
  // RETURN this promise and you'll get it in the next then statement
  return tempThis.db.collection("users").doc(tempThis.user.email).set({
    id: tempThis.user.uid,
    subscriptionId: obj.customerId,
    active: true
  })
}).then((docRef) => {
  console.log("Document written with ID: ", docRef);
  this.navigateToScreen('HomeScreen');
}).catch((errors) => {
  // This will catch the errors from subscribeUser AND from the set function
  console.log("Error adding document: ", errors);
});

或者只使用 async/await

try {
  const obj = await subscribeUser(creditCardToken)
  const docRef = await this.db.collection("users").doc(this.user.email).set({
    id: this.user.uid,
    subscriptionId: obj.customerId,
    active: true
  })
  console.log("Document written with ID: ", docRef);
  this.navigateToScreen('HomeScreen');
} catch (error) {
  // Handle your errors
}