nProgress的简单使用

最新推荐文章于 2024-07-01 15:35:01 发布

若水cjj

最新推荐文章于 2024-07-01 15:35:01 发布

阅读量910

点赞数

分类专栏： # 其他文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/cjhxydream/article/details/126256953

版权

nProgress是一个模仿YouTube和Medium的进度条插件，适用于Ajax密集型应用。其原理是通过创建固定定位的div模拟进度效果。在Vue.js项目中，可以结合axios，在请求和响应拦截器中控制nProgress的开始和结束，实现请求时显示进度条，请求结束时进度条消失。在实际应用中，别忘了引入样式文件以确保效果显示。

摘要由CSDN通过智能技术生成

nProgress的简单使用

nprogress的github地址

1. Nprogress简介

nProgress是一个类似youtube、Medium等网站上的小进度条插件。纳米级的进度条，涓涓细流动画告诉你的用户，一些事情正在发生！

非常适合Turbolinks、PJax或其他Ajax密集型应用程序。

2. Nprogress的原理

Nprogress的原理非常简单，就是页面启动的时候，构建一个方法，创建一个div，然后这个div靠近最顶部，用fixed定位住，至于样式就是按照自个或者默认走了。
一个页面或者一个接口的进度计算是非常复杂的，即便能够计算出来，那么消耗的性能终究是非常大的，这个时候虚假的进度条的作用就显示它的强大了。一开始进入处理方法的时候，它就启动loading的效果，一旦捕获到这个方法结束的时候，那么就释放它，为了防止比较生硬，那么释放后也会有一个进度条缓慢加载完成100%。

3.Nprogress的简单使用

需求：发送请求时进度条开始，请求完毕时进度条结束
因此可在axios发送请求时使用nprogress
在请求拦截器中启动nprogress
在响应拦截器中关闭nprogress
注意：一定要引入样式，不然不会出现效果

// 对axios进行二次封装
import axios from 'axios';
// 引入进度条  start进度条开始  done进度条结束
import nProgress from 'nprogress';
// 引入进度条样式，如果不引入那就没有效果
import "nprogress/nprogress.css"