react使用nprogress

nprogress用途

nprogress主要应用的场景为页面切换和请求数据，在进行这两项操作时浏览器的顶部会出现进度条，优化用户体验。

效果图

1.页面切换时

2.请求接口时

显示的效果都是一致的。

实现方式

页面切换

注：使用的react构建方式为：react-app-rewired （creat-react-app也是可以使用的 亲测）

npm install nprogress

重要
在route中绑定nprogress

新建一个FancyRoute.js文件，在hooks中绑定nprogress的开始与结尾，这样在进行路由的切换时就可以触发到nprogress

import React from 'react'
import { Route } from 'react-router-dom'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css';
import '../resources/FancyRoute.css'
const FancyRoute = props => {
  React.useState(nprogress.start());
  React.useEffect(() => {
    nprogress.done();
    return () => nprogress.start();
  });
  return (
    
  );
};
export default FancyRoute

在对应的route.jsx文件中使用到刚编写的FancyRoute.js文件

import React, { Suspense, lazy } from 'react';
import {  Switch, NavLink } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import FancyRoute from './plugin/FancyRoute';
const Home = lazy(() => import('./components/main'));
const About = lazy(() => import('./components/test'));
const { Header, Content, Footer } = Layout;
const BasicRoute = () => (
  
    

      

      
        nav 1
        nav 2
        nav 3
      
    
    
      Loading...

}> {/*引用上一步创建的FancyRoute*/}

Ant Design ©2018 Created by Ant UED

); export default BasicRoute;

以上是在页面切换时的使用方式

请求数据

在请求数据时使用到了fetch，所以对fetch函数进行适量的封装。

新建Fetch.tsx文件这里使用到了typescript函数，也可以使用javascript

import { message } from 'antd';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
const request = (url: string, config: any) => {
  NProgress.start();
  return fetch(url, config).then((res: any) => {
    if (!res.ok) {
      NProgress.done();
      throw Error('error');
    }
    return res.json();
  }).then((resJson: any) => {
    if (resJson.code === 404) {
      NProgress.done();
      throw Error('');
    } else {
      NProgress.done();
      return resJson;
    }
  }).catch((error: any) => {
    NProgress.done();
    console.log("error---->", error)
    message.error('内部错误');
  });
};

//GET
export const get = (url: string) => {
  return request(url, {
    method: 'GET',
    mode: 'cors',
  });
};
//POST
export const post = (url: string, data: any) => {
  return request(url, {
    body: JSON.stringify(data),
    headers: {
      'content-type': 'application/json'
    },
    method: 'POST'
  });
};

封装完成之后就可以正常的使用了

  Fetch.get('http://127.0.0.1:3001/xxx').then(res => {
            console.log("res--->", res);
  })

总结：
nprogress在react中使用还是比较简单的，重点是要在对应的位置进行绑定