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

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

对于大多数React开发人员来说，下面的代码没有什么困难，但为了更好地理解，我将给出一些细节

我有一部分javascript代码，仅当用户获得授权时才从Symfony后端API返回文章列表（稍后将通过JWT进行授权）。

getArticles

函数返回一个承诺，该承诺尝试从

try{}catch（error）{}

块内的Symfony后端获取文章

自动发送授权令牌不会触发查询中的错误。

由于

axios.get

位于

try{}catch（error）{}

块中，我很惊讶请求的控制台中出现了一个错误。它不会影响行为，但在控制台中出现这些错误不是很干净

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} );
        });
}

我的问题: 当代码位于

try/catch

中时，为什么控制台中会出现错误？要获得更干净的应用程序行为，有没有办法避免在控制台中出现此错误？我发现了其他React

try/catch

问题，但我没有扣除与我的问题的相似性。我错过什么了吗

提前感谢；-）

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

---

似乎没有解决方案可以避免控制台中的401HTTP错误代码，因为它是由Chrome本身打印的：。因此，以下代码无法避免要在控制台中打印的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} );
        });
}

---

您可以这样尝试，异步函数本身会返回一个承诺，而不需要手动返回

新承诺

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')
 }
}

因为你是在Axios调用之前解决承诺的。它应该是
const data=await axios.get（…）
并删除额外的
new Promise
包装，然后只
返回数据
（不要将
await/async
与“正常”承诺混用）。谢谢您的回答，但如果用户未登录，它会返回一个未捕获的错误。修正了“axios.get”之前的附加等待。并且初始axios错误（错误请求）仍在控制台中。已使用
root
try-catch
进行更新，这将防止控制台中出现错误。我尝试过，但错误请求错误仍然到达控制台，就好像try/catch块无法缓存一样。感谢您的努力扫描您为它创建了stackblitz，无法检查给定的代码，您的代码中一定有错误。