react使用nprogress

最新推荐文章于 2024-08-19 09:52:25 发布

十丶安

最新推荐文章于 2024-08-19 09:52:25 发布

阅读量5.4k

点赞数 2

分类专栏： html 文章标签： react

本文链接：https://blog.csdn.net/qq_29232955/article/details/108997059

版权

html 专栏收录该内容

8 篇文章

订阅专栏

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 (
    <Route {...props} />
  );
};
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 = () => (
  <Layout>
    <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
        <Menu.Item key="1"><NavLink to={'/'}>nav 1</NavLink></Menu.Item>
        <Menu.Item key="2"><NavLink to={'home'}>nav 2</NavLink></Menu.Item>
        <Menu.Item key="3"><NavLink to={'/'}>nav 3</NavLink></Menu.Item>
      </Menu>
    </Header>
    <Content style={{ marginTop: 64 }}>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
             {/*引用上一步创建的FancyRoute*/}
          <FancyRoute exact path="/" component={Home} />
          <FancyRoute path="/home" component={About} />
        </Switch>
      </Suspense>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  </Layout>
);
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中使用还是比较简单的，重点是要在对应的位置进行绑定