Question

我在React上还很新，现在正在学习这种语言。为此，我正在构建一个测试项目，尝试在其中遇到主要的经典问题并寻求解决。

对于大多数React开发人员而言，遵循以下代码并不困难，但我将提供一些详细信息以更好地理解。

我有一部分JavaScript代码仅在用户被授权获取Symfony后端API的情况下才从文章列表中返回文章列表（稍后将通过JWT进行授权）。 getArticles函数返回一个Promise，该Promise尝试在try {} catch (error) {}块内从Symfony后端获取文章。

自愿，不会发送授权令牌以触发查询错误。

由于axios.get位于try {} catch (error) {}块内，令我惊讶的是，请求的控制台中出现错误。不会影响行为，但是在控制台中出现这些错误并不是很干净。

我的问题：为什么代码在try/catch内部时控制台上会出现错误？为了使应用程序行为更简洁，是否可以避免在控制台中出现此错误？我还发现了其他React try/catch问题，但没有扣除与我问题相似的地方。我想念什么吗？

预先感谢;-）

我知道我的代码可以重构，请毫不犹豫地提出任何好的做法

componentDidMount(){
        /*To be prepared to attach JWT token*/
        axios.interceptors.request.use(req => {
          return req;
        });

        const getArticles = async() => { return new Promise( (resolve, reject)=> { 
                try{
                    const data = axios.get('https://xxxxx/api/articles');
                    resolve(data);
                } catch (err) {
                    reject(err);
                }
            });
        }
          
        getArticles().then(res => {
            const articles = res.data.data.items;
            this.setState( {errorOnArticlesLoading:false, articles: articles } );
        })
        .catch(error => {
            this.setState( {errorOnArticlesLoading:true} );
        });
}

Answer 1

您可以通过这种方式尝试，异步函数本身会返回一个Promise，您无需手动返回new Promise。

async componentDidMount() {
   try {
     /*To be prepared to attach JWT token*/
     axios.interceptors.request.use(req => req);

     const getArticles = async () => { 
       try {
         const data = axios.get('https://xxxxx/api/articles');
         this.setState({ errorOnArticlesLoading: false, articles: data.data.items });
       } catch (err) {
         this.setState( {errorOnArticlesLoading:true} );
       }
     };
     await getArticles()
  } catch(err) {
    console.log('Handled root error')
 }
}

Answer 2

似乎没有解决方法可以避免控制台中出现401 http错误代码，因为它是由Chrome本身打印的：See discussion here。因此，以下代码无法避免在控制台中打印401错误状态。

componentDidMount(){
        /*To be prepared to attach JWT token*/
        axios.interceptors.request.use(req => {
            return req;
        });
          
        const getArticles = async() => { 
                const data = await axios.get('https://xxxx/api/articles');
                return data;
        }
          
        getArticles().then(res => {
            const articles = res.data.data.items;
            this.setState( {errorOnArticlesLoading:false, articles: articles } );
        })
        .catch(error => {
            this.setState( {errorOnArticlesLoading:true} );
        });
}

ReactJS-Java尝试/捕获在控制台中显示错误

2 个答案: