ReactJS - Javascript try/catch 在控制台中显示错误

Question

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

对于大多数 React 开发人员来说，在下面的代码中没有困难，但我会提供一些细节以便更好地理解。

我有一部分 javascript 代码从 Symfony 后端 API 返回文章列表，前提是用户被授权获取它（稍后将通过 JWT 进行授权）。 getArticles 函数返回一个 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

似乎没有解决方案可以避免控制台中的 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} );
        });
}

Answer 2

您可以尝试这种方式，并且异步函数本身返回一个承诺，您不需要手动返回一个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')
 }
}