javascript - 有没有办法在等待 API 数据时不停止进度条?

标签 javascript vue.js async-await loading

我正在使用 vuejs 和 nprogress(在页面顶部显示进度线)。我希望在等待从 API 加载数据时进度线移动。

async created() {
    NProgress.configure({ trickleSpeed: 30 });
    NProgress.start();
    try {
      this.results = await this.getResults(this.resultsApi);
    } catch (err) {
      this.error = err.message;
    }
    NProgress.done();
},
methods: {
    getResults(url) {
      try {
        const res = await axios.get(url);
        return res;
      } catch (err) {
        return err;
      }
    }
}

在等待数据加载时,进度线停止,但我希望它不要停止移动。

最佳答案

您可以使用这个 inc() 函数,但对于 documentation 来说

Incrementing: To increment the progress bar, just use .inc(). This increments it with a random amount. This will never get to 100%: use it for every image load (or similar).

NProgress.inc();

但是为此,您可以一次又一次地调用它,以保持栏移动直到数据加载。类似于循环增加进度条的任意值

关于javascript - 有没有办法在等待 API 数据时不停止进度条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57834238/

相关文章:

javascript - 为什么这个使用 await/act/async 的官方 React 测试配方真的有效?

javascript - 如何获取目录中的 URL 字符串?

javascript - 将产品添加到购物车时,会为产品添加默认选项,但不会添加选定的选项

vue.js - vuex缓存数据的正确方式

javascript - Foundation 6 模式在 vue.js 组件中不起作用

c# - 如何在 Main 中调用异步方法?

javascript - 代码适用于三元运算符,但不适用于 if else 语句

javascript - 为什么 Parsley 不验证表单?

javascript - 在 Javascript 中将对象转换为包含多个对象的数组的理想方法是什么? (允许 ES6)

vector - 试图在Rc <RefCell <... >>内部修改 future Vec