反应：axios.interceptors 不临时工作

Question

axios.interceptors 特设 withErrorHandler 适用于 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} />
            );
        }
    }
};

Answer 1

您在第一次渲染后立即添加拦截器。而你在 App 的 componentWillMount 中使用了 axios。 componentWillMount 在第一次渲染之前。

我建议在应用程序中放置对 componentDidMount 的 axios 调用。无论如何，建议将加载数据等所有副作用放在 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;
            });
        }

反应：axios.interceptors 不临时工作

React: axios.interceptors do not work in hoc

javascript

reactjs

axios

interceptor

react-hoc