简介
在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.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: 登录失效
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
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) { ... })
*/
文章来源：https://www.toymoban.com/news/detail-575987.html
实际效果、
可以看到，在页面的顶部出现了红色的Ajax请求的进度条。
如果有哪里写的不好的地方，请各位看官体验一下小白博主啦，如果这篇文章对你有帮助的话，请点赞支持一下，谢谢了😄~~文章来源地址https://www.toymoban.com/news/detail-575987.html
到了这里，关于vue项目的进度条插件 -- nprogress的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
