进度条相关插件

nprogress

github地址

nprogress

下载/引入

npm install --save nprogress

// 引入进度条插件
import NProgress from "nprogress";
// 引入样式
import "nprogress/nprogress.css";

使用

// 开始进度条
NProgress.start();

 // 结束进度条
 NProgress.done();

示例

import axios from "axios";

import NProgress from "nprogress";
// 引入样式
import "nprogress/nprogress.css";

const instance = axios.create({
  baseURL: "/api",
});

// 请求拦截器
instance.interceptors.request.use((config) => {
  NProgress.start();
  return config;
});

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    NProgress.done();
    if (response.data.code === 200) {
      return response.data.data;
    }
    const { message } = response.data;
    return Promise.reject(message);
  },
  (err) => {
    NProgress.done();
    const message = err.message || "网络错误";
    return Promise.reject(message);
  }
);

export default instance;