vue项目的进度条插件 -- nprogress

简介

在Vue项目中，nprogress是一个轻量级的Ajax进度条组件。
官网：https://www.npmjs.com/package/nprogress

一、安装

npminstall--save nprogress

二、引入与使用

import nprogress from'nprogress'// 进度条import'nprogress/nprogress.css'//样式必须引入// 使用
nprogress.start();// 开启进度条
nprogress.done();// 进度完成

nprogress.set(0.4);// 在nprogress.start()之后调用，让进度条卡在40%的位置。

修改进度条的样式：

/* 修改进度条样式 */#nprogress .bar{background-color: red !important;height: 3px !important;}

是不是很简单？没错，就是这么简单。

三、实际例子

这里以小白博主封装的Ajax请求来举例。
可以看到，我在axios的请求拦截器里调用nprogress.start()，在响应拦截器里调用nprogress.done();
这样，就完成了Ajax的请求的进度条。
getBaseUrl.js是我封装的electron桌面软件读取外部配置文件的js文件，electron框架的自定义外部配置文件的配置与读取

import Vue from'vue'import axios from'axios'import qs from'qs'import*as common from'./common.js'import router from'../router/index'import nprogress from'nprogress'import'nprogress/nprogress.css'import{ readConfig }from'@/utils/getBaseUrl.js'

axios.defaults.timeout =150000
axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'const applicationType ='website'// 如果最后打包的是网站，就打开这个// let applicationType = "exe"  // 如果最后打包的是exe应用，就打开这个

axios.defaults.baseURL ='http://127.0.0.1:8535/emrapi'// 判断应用最后打包后，是网站，或者是exe应用。exe应用就不能访问网络，就需要在config.json里动态配置后端地址。if(applicationType ==='exe'){(asyncfunction(){const res =awaitreadConfig()
        axios.defaults.baseURL = res.baseUrl
        Vue.prototype.$baseURL = res.baseUrl
        window.$config = res
    })()}Vue.prototype.$baseURL = axios.defaults.baseURL

// // 请求拦截器
axios.interceptors.request.use(config=>{// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断const emrKey = localStorage.getItem('emrKey')
        nprogress.start()if(config.method ==='get'){
            config.data ={unused:0}// 这个是关键点，加入这行就可以了  解决get  请求添加不上content_type// 设置get请求,不设置的话，url的一些特殊字符传输的时候会报错let url = config.url
                // get参数编码if(config.method ==='get'&& config.params){
                url +='?'const keys = Object.keys(config.params)for(const key of keys){
                    url +=`${key}=${encodeURI(config.params[key])}&`}
                url = url.substring(0, url.length -1)
                config.params ={}}
            config.url = url
        }
        emrKey &&(config.headers.emrKey = emrKey)return config
    },error=>{return Promise.error(error)})// 响应拦截器
axios.interceptors.response.use(response=>{
        nprogress.done()// nprogress.set(0.8)if(['','200',null,undefined].includes(response.data.code)){return Promise.resolve(response)}else{if(response.data.code){switch(response.data.code){// 401: 登录失效// 未登录则跳转登录页面，并携带当前页面的路径// 在登录成功后返回当前页面，这一步需要在登录页操作。case401:case'401':
                        common.notify('error','登录超时，请重新登录！')setTimeout(()=>{
                            router.replace({path:'/',query:{redirect: router.currentRoute.fullPath }})},500)break// 403 权限不足case403:case'403':
                        common.notify('error','操作失败，权限不足！！！')break// 404请求不存在case404:case'404':
                        common.notify('error','网络请求不存在')break// 其他错误，直接抛出错误提示default:
                        common.notify('error', response.data.message ||'未知错误！')}}return Promise.reject(error.response)}},// 服务器状态码不是200的情况error=>{
        nprogress.done()// nprogress.set(0.8)return Promise.reject(error)})/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */functionget(url, params, headers){
    headers = headers ||{}returnnewPromise((resolve, reject)=>{
        axios.get(url,{params: params,headers: headers
        }).then(res=>{resolve(res.data)}).catch(err=>{reject(err.data)})})}/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 */functionpost(url, data, headers){
    headers = headers ||{}returnnewPromise((resolve, reject)=>{
        axios.post(url, qs.stringify(data,{arrayFormat:'repeat'}),{headers: headers
            }).then(res=>{resolve(res.data)}).catch(err=>{reject(err.data)})})}functionjsonPost(url, data, headers){
    headers = headers ||{'Content-Type':'application/json;charset=utf-8'}returnnewPromise((resolve, reject)=>{
        axios.post(url, data,{headers: headers
            }).then(res=>{resolve(res.data)}).catch(err=>{reject(err.data)})})}exportdefault{get, post, jsonPost }/*
使用，在全局中声明。
import http from "..."
Vue.prototype.$http= http;

在vue文件中使用：
this.$http.get(url, { username: "张三", age: "12" }).then(function(res) { ... }).catch(function(err) { ... })
*/

实际效果、

可以看到，在页面的顶部出现了红色的Ajax请求的进度条。
如果有哪里写的不好的地方，请各位看官体验一下小白博主啦，如果这篇文章对你有帮助的话，请点赞支持一下，谢谢了😄~~