react开发小技巧 -- 绚丽顶部进度条

顶部进度条

我们应该都看到过这样的进度条:

随着项目的包越来越大，加载越来越慢，有必要添加一个进度条，最起码让用户知道页面正在加载，而不是卡死了。

今天要实现这个进度条。

从Ant Design 社区精选组件中，可以知道，顶部进度条可以使用react-nprogress插件来实现。

Ant Design 社区精选组件

antd 是基于 Ant Design 设计规范实现的 高质量 React 组件库，倾向于只提供符合该规范且带有视觉展现的 UI 组件，也尽量不重复造轮子。推荐使用以下社区已有的优秀实现，与 antd 形成互补。

react-nprogress npm官网地址

安装

npm install --save nprogress 
// 或者

yarn add nprogress

用法

import NProgress from 'nprogress' // 引入nprogress插件
import 'nprogress/nprogress.css'  // 这个nprogress样式必须引入

NProgress.start();
NProgress.done();

常用配置

递增：要递增进度条，只需使用.inc()。这使它以随机量递增。这将永远不会达到100％：将其用于每次图像加载（或类似加载）。

NProgress.inc();

如果要增加特定值，可以将其作为参数传递：

NProgress.inc(0.2);     //这将获取当前状态值并添加0.2直到状态为0.994

配置项：

easing 和 speed

使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）

NProgress.configure({ easing: 'ease', speed: 500 });

showSpinner

通过将加载微调器设置为false来关闭它。（默认值：true）

NProgress.configure({ showSpinner: false });

使用NProgress 修改颜色

在全局样式文件中使用如下代码即可：

#nprogress .bar {
    background: red !important; //自定义颜色
}

使用场景

在页面切换中使用

import { useEffect, useState } from 'react';
import SideMenu from "../components/sandbox/SideMenu"; 

import { Layout, theme } from "antd";  

// 使用 NProgress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'; 

const { Content } = Layout;

export default function LayoutIndex() { 
  // 使用 NProgress
  NProgress.start();
  NProgress.configure({ easing: 'ease', speed: 1000 });

  useEffect(() => {
    // 使用 NProgress
    NProgress.done();
  }, []) 

  return (
    <div> 
      <Layout style={{ height: "100vh" }}>
        <SideMenu></SideMenu>
        <Layout className="site-layout"> 
        </Layout>
      </Layout>
    </div>
  );
}

在接口请求中使用

import qs from "qs";
import { message } from "antd";

// 使用 NProgress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'; 

// 使用 NProgress
NProgress.start();

const { stringify, parse } = qs;

const checkStatus = (res) => {
  // 使用 NProgress
  NProgress.done();
  
  if (200 >= res.status < 300) {
    return res;
  }
  message.error(`网络请求失败,${res.status}`);
  const error = new Error(res.statusText);
  error.response = error;
  throw error;
};

/**
 *  捕获成功登录过期状态码等
 * @param res
 * @returns {*}
 */
const judgeOkState = async (res) => {
  const cloneRes = await res.clone().json();

  //TODO:可以在这里管控全局请求
  if (!!cloneRes.code && cloneRes.code !== 200) {
    message.error(`11${cloneRes.msg}${cloneRes.code}`);
  }
  return res;
};

/**
 * 捕获失败
 * @param error
 */
const handleError = (error) => {
  if (error instanceof TypeError) {
    message.error(`网络请求失败啦！${error}`);
  }
  return {
    //防止页面崩溃，因为每个接口都有判断res.code以及data
    code: -1,
    data: false,
  };
};

class http {
  /**
   *静态的fetch请求通用方法
   * @param url
   * @param options
   * @returns {Promise<unknown>}
   */
  static async staticFetch(url = "", options = {}) {
    const defaultOptions = {
      /*允许携带cookies*/
      credentials: "include",
      /*允许跨域**/
      mode: "cors",
      headers: {
        token: null,
        Authorization: null,
        // 当请求方法是POST，如果不指定content-type是其他类型的话，默认为如下↓，要求参数传递样式为 key1=value1&key2=value2，但实际场景以json为多
        // 'content-type': 'application/x-www-form-urlencoded',
      },
    };
    if (options.method === "POST" || "PUT" || "DELETE") {
      defaultOptions.headers["Content-Type"] =
        "application/json; charset=utf-8";
    }
    const newOptions = {
      ...defaultOptions,
      ...options,
    };
    // console.log("newOptions", newOptions);
    return fetch(url, newOptions)
      .then(checkStatus)
      .then(judgeOkState)
      .then((res) => res.json())
      .catch(handleError);
  }

  /**
   *post请求方式
   * @param url
   * @returns {Promise<unknown>}
   */
  post(url, params = {}, option = {}) {
    const options = Object.assign(
      {
        method: "POST",
      },
      option
    );
    //一般我们常用场景用的是json，所以需要在headers加Content-Type类型
    options.body = JSON.stringify(params);

    //可以是上传键值对形式，也可以是文件，使用append创造键值对数据
    if (options.type === "FormData" && options.body !== "undefined") {
      let params = new FormData();
      for (let key of Object.keys(options.body)) {
        params.append(key, options.body[key]);
      }
      options.body = params;
    }
    return http.staticFetch(url, options); //类的静态方法只能通过类本身调用
  }

  /**
   * put方法
   * @param url
   * @returns {Promise<unknown>}
   */
  put(url, params = {}, option = {}) {
    const options = Object.assign(
      {
        method: "PUT",
      },
      option
    );
    options.body = JSON.stringify(params);
    return http.staticFetch(url, options); //类的静态方法只能通过类本身调用
  }

  /**
   * get请求方式
   * @param url
   * @param option
   */
  get(url, option = {}) {
    const options = Object.assign(
      {
        method: "GET",
      },
      option
    );
    return http.staticFetch(url, options);
  }

  /**
   * delete方法
   * @param url
   * @returns {Promise<unknown>}
   */ 
  deleteMethod(url, option = {}) {
    const options = Object.assign(
      {
        method: "DELETE",
      },
      option
    );
    return http.staticFetch(url, options);
  }

  /**
   * patch
   * @param url
   * @returns {Promise<unknown>}
   */
  patch(url, params = {}, option = {}) {
    const options = Object.assign(
      {
        method: "PATCH",
      },
      option
    );
    options.body = JSON.stringify(params);
    return http.staticFetch(url, options); //类的静态方法只能通过类本身调用
  }
}

const requestFun = new http(); //new生成实例
export const { post, get, put , deleteMethod , patch } = requestFun;
export default requestFun;