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";

// 1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios，只不过稍微配置一下
const requests = axios.create({
    // 配置对象
    // 基础路径，发送请求的时候，路径中会出现api
    baseURL:'/api',
    // 代表请求超时的时间5s
    timeout:5000,
});

// 请求拦截器
requests.interceptors.request.use((config)=>{
    // start进度条开始
    nProgress.start();
    return config;
});

// 响应拦截器
requests.interceptors.response.use((res)=>{
    // done进度条结束
    nProgress.done();
    return res.data;
},(error)=>{
    // 响应失败的回调函数
    return Promise.reject(new Error('faile')); // 终止promise回调
})

// 对外暴露
export default requests;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

4. Nprogress测试

在main.js中发送一个请求

import Vue from 'vue'
import App from './App.vue'

// 发送一个reqCategoryList请求进行测试
import {reqCategoryList} from "@/api"
reqCategoryList();

Vue.config.productionTip = false
import router from './router'
new Vue({
  render: h => h(App),
  // 注册路由
  router
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14