如何从 JavaScript 中的 setTimeout 等内部异步函数在外部函数中抛出错误？

Question

我想使用 firebase 身份验证登录到我的 react 本机应用程序。例如，要使用电子邮件和密码登录，我有以下功能，这基本上是一个 redux 操作：

export const userSignin = (email, password) =>
  async dispatch => {
    try {
      dispatch({ type: 'auth_attempt_started' })
      const user = await firebase.auth().signInWithEmailAndPassword(email.trim(), password)
      saveUserDataToAsyncStorage(user)
      if (!TASKS_SORT_BY && !TASKS_SORT_ORDER)
        dispatch(getTasksSortData(user.user.uid))
      if (!EMPLOYEES_SORT_BY && !EMPLOYEES_SORT_ORDER)
        dispatch(getEmployeesSortData(user.user.uid))
      if (!ACCOUNTS_SORT_BY && !ACCOUNTS_SORT_ORDER)
        dispatch(getAccountsSortData(user.user.uid))
      goToMain()
      setTimeout(() => {
        dispatch({
          type: 'user_signedin',
          payload: user
        })
      }, 100);
    }
    catch (err) {
      dispatch({
        type: 'auth_error',
        payload: err.toString()
      })
    }
  }

如果登录过程出现问题，此函数会引发错误。 问题是网速慢时，登录成功或失败的时间较长，有时30秒左右，对用户体验非常不利。

问题是：

如果登录过程未完成，我如何在有时可能 10 秒后抛出错误？

谢谢！

Answer 1

一般情况下可以通过setTimeout来实现。

componentDidMount() {
  this.setTimeout( () => {
     this.doThisAfterTenSeconds();
  },10000);
}

doThisAfterTenSeconds() {
   // Do something
}

在这种特殊情况下，

export const userSignin = (email, password) =>
  async dispatch => {
    try {
      // Auth attempt has started
      dispatch({ type: 'auth_attempt_started' })

      // Lets add a 10 second timeout
      let hasTimedOut = false
      setTimeout(() => {
          hasTimedOut = true
          // Display message here or throw "Connection timed out"
      }, 10000)

      // Now lets await the authentication
      const user = await firebase.auth().signInWithEmailAndPassword(email.trim(), password)
      // This code should not be run if auth attempt timed out. If we throw an error the check should not be neccessary...
      if (!hasTimedOut)
      {
         saveUserDataToAsyncStorage(user)
         if (!TASKS_SORT_BY && !TASKS_SORT_ORDER)
           dispatch(getTasksSortData(user.user.uid))
         if (!EMPLOYEES_SORT_BY && !EMPLOYEES_SORT_ORDER)
           dispatch(getEmployeesSortData(user.user.uid))
         if (!ACCOUNTS_SORT_BY && !ACCOUNTS_SORT_ORDER)
           dispatch(getAccountsSortData(user.user.uid))
         goToMain()
         setTimeout(() => {
           dispatch({
             type: 'user_signedin',
             payload: user
           })
         }, 100);
         }
       }
       catch (err) {
         dispatch({
           type: 'auth_error',
           payload: err.toString()
         })
       }
     }