component: remove axios interceptor with componentWillUnmount lifecycle

oscar-http-ajax
oscarzhou 2020-12-26 11:41:48 +13:00
parent 4a1226e765
commit 5c769c261b
2 changed files with 18 additions and 3 deletions

View File

@ -4,11 +4,20 @@ import Layout from './hoc/Layout/Layout';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
state = {
show: true
};
componentDidMount() {
setTimeout(() => {
this.setState({show: false});
}, 3000);
}
render() {
return (
<div>
<Layout>
<BurgerBuilder />
{this.state.show ? <BurgerBuilder /> : null }
</Layout>
</div>
);

View File

@ -10,16 +10,22 @@ const withErrorHandler = (WrappedComponent, axios) => {
}
componentWillMount() { // This will happen before child component rendering
axios.interceptors.request.use(req => {
this.reqInterceptor = axios.interceptors.request.use(req => {
this.setState({ error: null });
return req;
});
axios.interceptors.response.use(res => res, error => {
this.resInterceptor = axios.interceptors.response.use(res => res, error => {
this.setState({ error: error });
});
}
componentWillUnmount() {
console.log('Will Unmount', this.reqInterceptor, this.resInterceptor);
axios.interceptors.request.eject(this.reqInterceptor);
axios.interceptors.response.eject(this.resInterceptor);
}
errorConfirmedHandler = () => {
this.setState({ error: null });
}