beforeRouteEnter NProgress中的调用方法
beforeRouteEnter NProgress中的调用方法
提问于 2022-08-08 20:15:17
在导航到路由之前，我正在尝试调用API。问题是，如果我试图在beforeRouteEnter中调用axios调用，那么它运行得很好，例如：
{
beforeRouteEnter(routeTo, routeFrom, next) {
NProgress.start()
axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
next((vm) => {
vm.data = res.data
})
NProgress.done()
})
},
}但是，当我尝试从方法调用API时，它在解析API之前导航到路由，而NProgress栏也是在解析调用之前完成的。
{
beforeRouteEnter(routeTo, routeFrom, next) {
NProgress.start()
next((vm) => {
vm.index()
NProgress.done()
})
},
methods: {
index() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
console.log(res.data)
})
.catch((error) => {
console.log(error)
})
},
},
}有人能指点我可能出了什么事吗？
回答 1
Stack Overflow用户
发布于 2022-08-09 13:06:54
在第一个示例中，设置进度条，然后使用Axios调用API，使用.then在调用后链接函数。这意味着函数将等待到承诺得到了解决或拒绝。，然后再继续。只有当axios调用成功完成时，才执行下一个函数，在该函数中设置数据并停止进度条。如果承诺被拒绝，您还应该使用.catch。
现在，在您的第二个示例中，您不使用beforeRouteEnter中的承诺。这基本上意味着所有的行都会立即执行。因此，您可以调用vm.index()，而无需等待axios调用完成下一行，NProgress.done()将被执行。虽然有几种方法可以解决这个问题，但我的首选是使用异步/等待，这只是使用约定和链接的一种更干净的方法。
就你的情况而言，我认为这是可行的：
beforeRouteEnter(routeTo, routeFrom, next) {
NProgress.start();
await vm.index();
NProgress.done();
next();
});
}其方法是：
methods: {
async index () {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
console.log(response);
} catch (error) {
console.log(error);
}
}
}因为这只是您组件的一部分，所以我不能测试它，但是我认为您已经知道了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73283537
复制相关文章
相似问题
腾讯云开发者
