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