Question

我有一个调用函数getAllPeople的React组件：

componentDidMount() {
   getAllPeople().then(response => {
      this.setState(() => ({ people: response.data }));
    });
  }

getAllPeople位于我的api模块中：

export function getAllPeople() {
  return axios
    .get("/api/getAllPeople")
    .then(response => {
      return response.data;
    })
    .catch(error => {
      return error;
    });
}

我认为这是一个非常基本的问题，但假设我想处理我的根组件中的错误（在我的componentDidMount方法中），而不是在api函数中，这个根组件是怎么做的知道axios调用是否返回错误？即处理来自axios承诺的错误的最佳方法是什么？

Answer 1

getAllPeople函数已经从axios调用中返回数据或错误消息。因此，在componentDidMount中，您需要检查对getAllPeople的调用的返回值，以确定它是错误还是返回的有效数据。

componentDidMount() {
   getAllPeople().then(response => {
      if(response!=error) //error is the error object you can get from the axios call
         this.setState(() => ({ people: response}));
      else { // your error handling goes here
       }
    });
  }

如果您想从api返回承诺，则不应解决您在api中axios电话回复的承诺。相反，您可以执行以下操作：

export function getAllPeople() {
  return axios.get("/api/getAllPeople");
}

然后您可以在componentDidMount中解决。

componentDidMount() {
   getAllPeople()
   .then(response => {          
         this.setState(() => ({ people: response.data}));
     })
   .catch(error => { // your error handling goes here}
  }

Answer 2

使用Promise catch方法处理 API错误的更好方法* 。

axios.get(people)
    .then((response) => {
        // Success
    })
    .catch((error) => {
        // Error
        if (error.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            // console.log(error.response.data);
            // console.log(error.response.status);
            // console.log(error.response.headers);
        } else if (error.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the 
            // browser and an instance of
            // http.ClientRequest in node.js
            console.log(error.request);
        } else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
        }
        console.log(error.config);
    });

Answer 3

我的建议是使用React的尖端功能。 Error Boundaries

这是Dan Abramov使用此功能的example。在这种情况下，您可以使用此错误边界组件包装组件。捕获axios中的错误的特殊之处在于您可以使用 interceptors用于捕获API错误。您的错误边界组件可能看起来像

import React, { Component } from 'react';

const errorHandler = (WrappedComponent, axios) => {
  return class EH extends Component {
    state = {
      error: null
    };

    componentDidMount() {
      // Set axios interceptors
      this.requestInterceptor = axios.interceptors.request.use(req => {
        this.setState({ error: null });
        return req;
      });

      this.responseInterceptor = axios.interceptors.response.use(
        res => res,
        error => {
          alert('Error happened');
          this.setState({ error });
        }
      );
    }

    componentWillUnmount() {
      // Remove handlers, so Garbage Collector will get rid of if WrappedComponent will be removed 
      axios.interceptors.request.eject(this.requestInterceptor);
      axios.interceptors.response.eject(this.responseInterceptor);
    }

    render() {
      let renderSection = this.state.error ? <div>Error</div> : <WrappedComponent {...this.props} />
      return renderSection;
    }
  };
};

export default errorHandler;

然后，您可以使用它来包装您的根组件传递axios实例

errorHandler(Checkout, api)

因此，您根本不需要考虑组件内部的错误。

Answer 4

您可以在将响应设置为state之前检查响应。像

这样的东西

componentDidMount() {
   getAllPeople().then(response => {
       // check if its actual response or error
        if(error) this.setState(() => ({ error: response }));
        else this.setState(() => ({ people: response}));
    });
  }

它依赖于axios将为成功和失败返回不同对象的事实。

在React中处理Axios错误

4 个答案: