axios请求拦截器错误_React中使用高阶组件和axios的拦截器，统一处理请求失败提示...

在前端开发中，判断边界条件和重要，通常我们要花费开发中的很大一部分时间做边界条件处理。发送ajax请求时，假设有这样一个需求：每个页面发送ajax请求，如果请求失败，在页面上统一弹出样式一样的错误提示。这该怎么做呢？

每个页面都去引用一个错误提示组件，然后在业务逻辑中去一遍遍写错误处理的代码吗？显然有点low，这个时候，可以用React中的高阶组件，配合axios的拦截器，解决这个问题。

第一步，我们写出项目中的根组件：

class App extends Component {

render() {

return (

home

)

}

componentDidMount() {

axios.get('/index.json')

.then(()=>{})

.catch(()=>{})

}

这个组件中，我们只是做了ajax请求，失败的时候并没有做任何处理。

第二步，我们来写一个高阶组件

export default (WrappedComponent) => {

return class extends Component {

constructor(props) {

super(props)

this.state = {

error: false

}

componentWillMount() {

axios.interceptors.response.use((response) => {

return response;

}, (error) => {

this.setState({

error: true

})

return Promise.reject(error);

});

}

render() {

const errorElem = this.state.error ?

请求出错了

: null

return (

{ errorElem }

)

}

在高阶组件中，我们对原始组件做了一个封装，在组件外部增加了一个请求出错提示的div，然后通过高阶组件的state数据控制div的隐藏和显示，而何时隐藏和显示，要看axios注入器的处理情况，如果请求正常发送，div不会显示，如果请求异常，高阶组件会把div显示出来。

另外我们把拦截器定义在componentWillMount中，是为了在页面执行ajax请求发送之前，就把拦截器准备好。如果放在componentDidMount中，会导致拦截器拦截不到子组件的请求异常，因为父组件要等所有子组件的componentDidMount都执行完毕，才会执行自己的componentDidMount，这个时候增加拦截器，已经无法对子组件发出的请求做拦截了。

最后一步，我们要对整个应用的最外层应用一下高阶组件，记得，一定要把高阶组件用在最外层组件上，不然有可能会导致axios拦截器多次被定义，产生代码bug。

const HocApp = hoc(App)

ReactDOM.render(, document.getElementById('root'));

通过上面几步代码，我们就实现了想要的功能，无论你在App下增加多少层子组件，只要组件中ajax发生错误，就会在页面上显示出来

请求出错了

这段内容。

这个实现是目前想到的一个实现方式，大家如果有其他方式，欢迎留言探讨！

axios请求拦截器错误_React中使用高阶组件和axios的拦截器，统一处理请求失败提示...相关推荐

React中的高阶组件
React中的高阶组件高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧,HOC自身不是React API的一部分,它是一种基于React的组合 ...
React 中的高阶组件及其应用场景
本文目录什么是高阶组件 React 中的高阶组件属性代理(Props Proxy) 反向继承(Inheritance Inversion) 高阶组件存在的问题高阶组件的约定高阶组件的应用场景 ...
理解react中的高阶组件和高阶函数
高阶组件 ES6中使用关键字class来使它的语法有和类相似的写法和功能,但是它的本质还是一个函数. 因此,高阶组件本质上是一个函数,只是这种组件(函数)接收一个组件,返回一个新的组件. 比如下面 ...
react——@修饰器——高阶组件的使用——通过装饰器来调用高阶组件——简单修改样式
使用装饰器@ 装饰器用来装饰类的,可以增强类,在不修改类的内部的源码的同时,增强它的能力(属性或方法) 装饰器使用@函数名写法,对类进行装饰,目前在js中还是提案,使用需要配置相关兼容代码库. re ...
React中自定义高阶组件的应用（HOC）
什么是HOC? HOC(Higher-order component)是一种React 的进阶使用方法,只要还是为了便于组件的复用.强调一点,HOC本身并不是 React API, 它就是一个方法,一 ...
chapter2.3、react高阶组件，装饰器
React 技术高阶组件 let Root = props => <div>{props.schoolName}</div>; 如果要在上例的Root组件进行增强怎么办 ...
react 给一个引用的组件添加新属性_高阶组件在React中的应用
高阶组件的定义接受React组件作为输入,输出一个新的React组件. 概念源自于高阶函数,将函数作为参数,或者输出一个函数,如map,reduce,sort. 用haskell的函数签名来表示: ...
【哔哩哔哩播放器】2020最新版高仿哔哩哔哩视频播放器网站源码
[哔哩哔哩播放器]2020最新版高仿哔哩哔哩视频播放器网站源码 Lan 2020-05-12 10:06 190 人阅读 0 条评论 2020最新版高仿哔哩哔哩视频播放器网站源码,支持弹 ...
python中的高阶函数
python中的高阶函数文章目录: 1 什么是高阶函数? 1.1 高阶函数:一个函数的`函数名`作为参数传给另外一个函数 1.2 高阶函数:一个函数返回值(return)为另外一个`函数` 2 py ...

axios请求拦截器错误_React中使用高阶组件和axios的拦截器，统一处理请求失败提示...

axios请求拦截器错误_React中使用高阶组件和axios的拦截器，统一处理请求失败提示...相关推荐

最新文章

热门文章