Uncaught (in promise) undefined - Vue-router

Question

我面临一个非常奇怪的问题，如果具有受限权限的用户尝试登录我的网络应用程序，他们会看到以下错误：

Uncaught (in promise) undefined

但这不会发生在拥有最大权限的用户身上。

我认为这个问题是由重新路由引起的。如果用户没有 page_access 1，它会路由到 /holidays。另一个奇怪的是，这个错误只出现一次，那是用户第一次登录的时候。如果页面被刷新或者用户导航到其他页面，它就不会出现。

路由器.js

 Vue.use(Router)

const router = new Router({

  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard,
      beforeEnter(to, from, next) {
        if(localStorage.token) {
          if(localStorage.page_access.indexOf('1') != -1 && localStorage.page_access != null) {
            next('/holidays');
          }
          else {
            next();
          }
        } else {
          next('/login');
        }
      }
    },
    {
      path: '/holidays',
      name: 'holidays',
      component: Holidays,
      beforeEnter(to, from, next) {
        if(localStorage.token) {
          next();
        } else {
          next('/login');
        }
      }
    },
  ],
  mode: 'history'
})

router.beforeResolve((to, from, next) => {

  if(localStorage.token && from.name != 'login' && to.name != 'login') {
    store.dispatch('autoLogin')
    .then(response => {
      store.dispatch('getNavigation');
      next();
    })
    .catch(err => {
      console.log(err);
    });
  }
  else if(from.name && !localStorage.token) {
    router.go('/login');
  }
  else {
    next();
  }
});

export default router;

store.js

 async autoLogin({commit}) {
    const token = localStorage.getItem('token');
    const remember_token = localStorage.getItem('remember_token');

    if(!token) {
      return;
    }

    try {
      const res = await axios({
      method: 'post',
      data: { userId: localStorage.user_id, token: localStorage.remember_token },
      url: 'https://controlapi.totalprocessing.com/api/get-user',
      config: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
      })
      .then(response => {
        if(response.data.remember_token == remember_token) {
          commit('authUser', { token: token });
          return response;
        }
        else {
          localStorage.clear();
          return null;
        }
      })
      .catch(e => {
          this.errors.push(e);
          return e;
      })
      return res;
    }
    catch(e) {
      console.log(e);
      return e;
    }
}

 getNavigation({commit}) {
    let pageAccess = localStorage.page_access == 'null' ? null : localStorage.page_access;
    let subPageAccess = localStorage.sub_page_access == 'null' ? null : localStorage.sub_page_access;

    axios({
    method: 'post',
    data: { pageAccess: pageAccess, subPageAccess: subPageAccess },
    url: 'https://controlapi.totalprocessing.com/api/client-get-navigation',
    config: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
    })
    .then(response => {
    console.log(response.data);
        const data = response.data;
        const tree = [];

        data.reduce(function(a, b, i, r) {

            // Add the parent nodes
            if(a.page_id != b.page_id){
                tree.push({ page_id: a.page_id,
                            page_name: a.page_name,
                            page_path: a.path,
                            page_icon: a.page_icon
                            });
            }

            // Add the last parent node
            if(i+1 == data.length) {
                tree.push({ page_id: b.page_id,
                            page_name: b.page_name,
                            page_path: b.path,
                            page_icon: b.page_icon
                            });

                // Add the child nodes to the parent nodes
                data.reduce(function(a, b) {
                    if(a.sub_page_id) {
                        const find = tree.findIndex(f => f.page_id == a.parent_id);

                        // Add the first child node to parent
                        if(!("children" in tree[find])) {
                            tree[find].children = [];

                            tree[find].children.push({ page_id: a.sub_page_id,
                                                    page_name: a.sub_page_name,
                                                    page_path: a.sub_page_path,
                                                    page_icon: a.sub_page_icon
                            });
                        }
                        // Add the remaining child nodes to parent nodes
                        else {
                            tree[find].children.push({ page_id: a.sub_page_id,
                                                    page_name: a.sub_page_name,
                                                    page_path: a.sub_page_path,
                                                    page_icon: a.sub_page_icon
                            });
                        }
                    }
                    return b;
                });
            }
            return b;
        });

        commit('authNav', {
        navigation: tree
        });
    })
    .catch(e => {
        this.errors.push(e)
    })
}

原文由 Dally 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据我过去几天的经验，在调用 this.$router.push() 的函数中捕获错误至关重要。

我发现有两种方法是非常可行的：

 handleSomething() {
    this.$router.push({}).catch((err) => {
        throw new Error(`Problem handling something: ${err}.`);
    });
},

和

async handleSomething() {
    try {
        await this.$router.push({});
    } catch (err) {
        throw new Error(`Problem handling something: ${err}.`);
    }
},

目前，我更喜欢这里的 async/await 技术，因为它具有执行阻塞的性质，但您应该注意的关键是“未捕获的 promise”错误本身是 JavaScript 中的一个已知问题，通常称为“a承诺被吞下”，这是由于 Promise 被拒绝但该“错误”被吞下，因为它没有被正确捕获。也就是说，没有捕获错误的代码块，因此您的应用程序无法对错误执行任何操作。

这意味着最重要的是不要吞下错误，这意味着您需要在某个地方捕获它。在我的两个示例中，您可以看到错误将通过 catch 块传递。

错误吞咽的次要因素是错误甚至一开始就被抛出。在我看到这一点的应用程序中，很难调试，但我可以看到错误的性质与 Vue 组件在路由更改时卸载和加载有关。例如，如果您在一个组件中调用 this.$router.push() ，然后该组件在路由更改正在进行时被销毁，那么您可能会看到这样的错误是合理的。

作为此问题的扩展，如果发生路由更改并且生成的组件在 Promise 解决之前尝试从 .push() 事件中读取数据，它也可能引发此错误。 await 应该通过指示您的应用程序在读取前等待来停止此类错误。

所以简而言之，调查这两件事：

1. 您是否在 this.$router.push() 正在执行时以某种方式破坏/创建组件？
2. 下一个组件是否可能在路由更改完成之前读取有关路由参数的数据？

如果您发现其中一些可能正在发生，请考虑您的数据流并确保通过驯服异步行为来解决它，而不仅仅是通过抑制错误。在我看来，错误是更大问题的征兆。

在调试过程中，将 console.log() 添加到所有组件的 created/mounted 和 destroyed 生命周期方法中，并添加到与路由更改相关的函数中。您应该能够掌握数据流动的方式。

我怀疑这个问题的性质源于在飞行中更改航线时对 this.$route.params 的下游使用。添加大量的 console.logs 和/或单步调试器。

原文由 agm1984 发布，翻译遵循 CC BY-SA 4.0 许可协议