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.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) { ... })
*/

实际效果、

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