在vue项目中使用进度条的实现

最新推荐文章于 2024-08-20 11:35:49 发布

Lumbago～

最新推荐文章于 2024-08-20 11:35:49 发布

阅读量286

点赞数 2

分类专栏： vue项目

本文链接：https://blog.csdn.net/weixin_55690702/article/details/115251136

版权

本文介绍了如何在Vue项目中安装并使用NProgress库，通过`npm install nprogress --save`进行下载，然后在拦截器中应用`Nprogress.start()`和`Nprogress.done()`来显示和结束进度条。

摘要由CSDN通过智能技术生成

下载

npm install nprogress --save

基本用法

Nprogress.start()

Nprogress.start().done()

（我在拦截器直接引入）

import axios from 'axios'
import store from "../store/index"

//引入nprogress

import Nprogress from "nprogress"
import 'nprogress/nprogress.css'

const Server = axios.create({
    baseURL: 'https://www.liulongbin.top:8888/api/private/v1/',
    timeout: 5000,
});
Server.interceptors.request.use(function (config) {
    //开始
    Nprogress.start()
    if (store.state.token.length > 0) {
        config.headers['Authorization'] = store.state.token;
    }
    return config
}, function (error) {
    return Promise.reject(error);
})
Server.interceptors.response.use(function (response) {
     //结束
    Nprogress.start().done()
    return response.data
}, function (error) {
    return Promise.reject(error);
})

export default Serve