内容简介:文章有错误和不合理的地方欢迎小伙伴轻拍这就是困扰我的问题对fetch()进行封装,并对请求的返回数据做拦截,当捕捉到错误的时候,判断错误的状态码,404时让页面跳转到404页面,当时401时跳转到登录页面,500调整到500页面。
文章有错误和不合理的地方欢迎小伙伴轻拍
痛点
这就是困扰我的问题
对fetch()进行封装,并对请求的返回数据做拦截,当捕捉到错误的时候,判断错误的状态码,404时让页面跳转到404页面,当时401时跳转到登录页面,500调整到500页面。
react-router ^4并没有暴露出来history对象,这让非组件内页面跳转变的困难。
问题的解决
定义store
function navTo(state = "/", action) { switch (action.type) { case 'NAV_TO': return action.path; default: return state } } let store = createStore(combineReducers({navTo})); export default store;
fetch()状态拦截代码
import store from "../../redux/store"; fetch(builUrl(url, params), requestInit) .then(data => { return data.json() }).catch(e => { const status = e.name; if (status === 401) { store.dispatch({type: 'NAV_TO', path: '/login'}); return; } if (status === 403) { store.dispatch({type: 'NAV_TO', path: '/exception/403'}); return; } if (status <= 504 && status >= 500) { store.dispatch({type: 'NAV_TO', path: '/exception/500'}); return; } if (status >= 404 && status < 422) { store.dispatch({type: 'NAV_TO', path: '/exception/404'}); return; } })
app.js实现对store的订阅,并跳转页面
import React, {Component} from 'react'; import store from './app/common/redux/store.js' import {withRouter} from "react-router-dom"; @withRouter class App extends Component { constructor(props) { super(props); store.subscribe(() => { this.props.history.push(store.getState().navTo); }); } render() { return ( <div> {this.props.children} </div> ); } } export default App;
这就是在函数中通过订阅的方式来实现页面跳转,easy easy !!!
小伙伴可以举一反三运用到更多的地方去!!
:+1::+1::+1::+1::+1:如果能帮助到小伙伴的话欢迎点个赞:+1::+1::+1::+1::+1:
:+1::+1::+1::+1::+1:如果能帮助到小伙伴的话欢迎点个赞:+1::+1::+1::+1::+1:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Azure Document DB 存储过程、触发器、自定义函数的实现
- 触发器
- jQuery 自动触发事件实例
- Oracle触发器详细讲解
- react事件系统之事件触发
- 窗口实用触发器:ContinuousEventTimeTrigger
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java Web开发从初学到精通
方振宇 / 电子工业 / 2010-6 / 69.00元
《Java Web开发从初学到精通》介绍如何整合Web框架进行J2EE开发,所有实例都基于MyEclipse IDE开发,引领读者快速进入基于JaVa web的J2EE应用领域。《Java Web开发从初学到精通》开始主要介绍Servlet、JSP、JavaBean、EL、JSTL、JDBC等Web开发基础知识,然后学习Struts、Hibernate、Spring、Ajax、JSF等开源框架,并......一起来看看 《Java Web开发从初学到精通》 这本书的介绍吧!