vue3 实现浏览器进度条

当我们打开某些网站时，浏览器顶部会显示进度条

那么如何在 vue 项目中实现这个效果呢，让我们一起来看看

1. 安装依赖包

要实现这个效果，需要安装 nprogress 和 axios 包

npm install nprogress

2. 编写拦截器

我们在 axios 的拦截器中编写逻辑代码，当发出 request 请求时，进度条开始；当收到 response 响应时，进度条结束。

import axios from "axios";
//引入进度条和进度条样式
import nProgress from 'nprogress';
import 'nprogress/nprogress.css'
//start 进度条开始 done 进度条结束

const httpInstance = axios.create({
    baseURL: 'http://127.0.0.1:8080/admin',
    timeout:5000
})


//请求拦截器；在请求发送前，请求拦截器可以检测到，请求发出去之前做一些事情
httpInstance.interceptors.request.use((config)=>{
    //config;配置对象 对象里面有一个属性很重要 headers 请求头
    //开启进度条
    nProgress.start();
    return config
});

//响应拦截器
httpInstance.interceptors.response.use((res)=>{
    //成功的回调函数；服务器响应数据回来之后，响应拦截器可以检测到，可以做一些事情
    //进度条结束
    nProgress.done();
    return res;

},(error)=>{
    //失败的回调函数
    return Promise.reject(new Error('failed to open the page'))
})


export default httpInstance