插件——nprogress进度条

一，安装 npm install nprogress --save

 npm install nprogress --save

二，在需要使用的页面引入 这里也要引入axios 在请求拦截器的时候使用

//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
//引入进度条的时候也要引入axios
import axios from "axios";

三，在created中配置请求拦截器

   // 请求拦截器
  created() {
    axios.interceptors.request.use((config) => {
      // 进度条开始动
      nprogress.start();
      return config;
    });
    // 响应拦截器
    axios.interceptors.response.use(
      (config) => {
        //res:实质就是项目中发请求、服务器返回的数据
        //进度条结束
        nprogress.done();
        return config;
      },
      (err) => {
        //温馨提示:某一天发请求,请求失败,请求失败的信息打印出来
        alert(err.message);
        //终止Promise链
        return new Promise();
      }
    );
  },