react vue 全局组件封装 顶部进度条封装使用

最近想在react的项目里面弄一个顶部请求数据的进度条，去搜了一下，发现都没有我想要的，于是就想着自己做一个，话不多说，直接上代码：

首先在项目src/conponent下新建一个文件夹Progress

在Progress文件夹下新建progress.tsx和index.tsx，这里的ts规范我就偷懒用any了

progress.tsx里面的内容:

export const Progress = () => {
  // 创建元素追加到body
  let div: any = document.createElement('div');
  const bar = document.createElement("div");
  div.appendChild(bar);
  document.body.appendChild(div);
  // 随便写点样式
  div.style.cssText = `
    position: fixed;
    top: 0;
    width: 100%;
    height: 2px;
    z-index: 999;
  `
  bar.style.cssText = `
    height: inherit;
    width: 0px;
    background-color: #1890ff;
  `
  // 写个计时器，每隔10毫秒加1
  let speed = 1;
  let timer = setInterval(() => {
    // 只加到90，剩下的等请求结束后再加
    if (speed <= 90) {
      speed += 1
      bar.style.width = speed + "%";
    }
  }, 10)

  return {
    destroy() {
      // 清除计时器
      clearInterval(timer)
      // 请求结束后加到100
      bar.style.width = 100 + "%";
      if (div) {
        // 等500毫秒后清除，不然同时进行，效果不好
        setTimeout(() => {
          document.body.removeChild(div);
          // 元素清除之后必须赋值为空，不然会报错
          div = null
        }, 100)
      }
    }
  }
};

index.tsx里面的内容：

import { Progress } from './progress'

let progressInstance: any = 0;
const getProgress = () => {
  progressInstance = progressInstance || Progress()
}

export const progress = {
  start() {
    getProgress()
  },
  done() {
    if (progressInstance) {
      progressInstance.destroy()
      progressInstance = null
    }
  }
}

最后再到axios请求数据的文件下调用：

这个instance就是用axios.create重新创建的一个事列，不创建的话直接用axios.instance.interceptors.request.use就可以了

 代码：

// 发送多个请求时，发送第一个请求时执行start()，最后一个请求结束时执行done()
let reqNum = 0;
instance.interceptors.request.use((config: any) => {
    // 发送请求
    reqNum ++;if(reqNum === 1) progress.start();
    return config;
});
instance.interceptors.response.use((config: any) => {
    // 请求接收
    reqNum --;if(reqNum <=0) progress.done();
    return config;
});

最后看看效果

这样就是能实现在数据请求的时候有进度条了，其实我这个相当于纯原生的方式写的，这样既可以使用在recat中，又可以在vue中使用，不过vue好像可以有另外自己的一种写法，大家自己选择