axios.interceptors 特别适用于 App.js 中的 clicked 方法,但不适用于 App.js 中的 componentWillMount 或 componentDidMount。我该如何修复它?
App.js
class App extends Component {
componentDidMount() {
axios.get('https://wrongaddress')
.then(response => {
console.log(response);
});
}
clicked() {
axios.get('https://wrongaddress')
.then(response => {
console.log(response);
});
}
render() {
return (
<button onClick={this.clicked}>btn</button>
);
}
}
export default withErrorHandler(App, axios);
hoc/withErrorHandler.js
const withErrorHandler = ( WrappedComponent, axios ) => {
return class extends Component {
componentDidMount() {
axios.interceptors.request.use(req => {
console.log(req);
return req;
});
}
render() {
return (
<WrappedComponent {...this.props} />
);
}
}
};
最佳答案
您可以在第一次渲染之后临时添加拦截器。并且您在App中的componentWillMount中使用axios。 componentWillMount 在第一次渲染之前。
我建议将 axios 调用放置在 App 中的 componentDidMount 中。无论如何,建议将所有副作用(例如加载数据)放入 componentDidMount 中。检查此处的文档:https://reactjs.org/docs/react-component.html#componentdidmount
class App extends Component {
componentdidMount() {
axios.get('https://wrongaddress')
.then(response => {
console.log(response);
});
}
...
您还可以将 HOC 中的拦截器处理移至 componentWillMount。
const withErrorHandler = ( WrappedComponent, axios ) => {
return class extends Component {
componentWillMount() {
axios.interceptors.request.use(req => {
console.log(req);
return req;
});
}
关于javascript - React : axios. 拦截器临时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60203128/