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

简介

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

一、安装

npm install --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') {(async function() {const res = await readConfig()axios.defaults.baseURL = res.baseUrlVue.prototype.$baseURL = res.baseUrlwindow.$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: 登录失效// 未登录则跳转登录页面，并携带当前页面的路径// 在登录成功后返回当前页面，这一步需要在登录页操作。case 401:case '401':common.notify('error', '登录超时，请重新登录！')setTimeout(() => {router.replace({path: '/',query: { redirect: router.currentRoute.fullPath }})}, 500)break// 403 权限不足case 403:case '403':common.notify('error', '操作失败，权限不足！！！')break// 404请求不存在case 404: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 [请求时携带的参数]*/
function get(url, params, headers) {headers = headers || {}return new Promise((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 [请求时携带的参数]*/
function post(url, data, headers) {headers = headers || {}return new Promise((resolve, reject) => {axios.post(url, qs.stringify(data, { arrayFormat: 'repeat' }), {headers: headers}).then(res => {resolve(res.data)}).catch(err => {reject(err.data)})})
}function jsonPost(url, data, headers) {headers = headers || { 'Content-Type': 'application/json;charset=utf-8' }return new Promise((resolve, reject) => {axios.post(url, data, {headers: headers}).then(res => {resolve(res.data)}).catch(err => {reject(err.data)})})
}export default {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请求的进度条。
如果有哪里写的不好的地方，请各位看官体验一下小白博主啦，如果这篇文章对你有帮助的话，请点赞支持一下，谢谢了😄~~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！