Reactjs：避免1个API失败的最佳方法会影响react componentDidMount

问题描述

我正在编写一个react组件，该组件需要在componentDidMount内部进行两次或更多 API调用。

这2个API调用将更新2个不同的状态，因此将重新呈现两个不同的子组件。

但是，我认为我写的不是最好的方法，因为一个API的潜在故障也会使另一个API失效。因为它们被一起放在componentDidMount中。

我想问一下解决这种情况的最佳方法是什么？为了避免1个API失败影响componentDidMount中的多个API调用的其他API调用？谢谢您的帮助！

import React from "react";
import * as api from "api";
import moment from "moment";

class ExchangeRate extends React.Component {

   constructor(props) {
        super(props);
        this.state = {
            dataCurrency: [],dataTrend: []
        }
    };

    async componentDidMount() {
        const date = moment().subtract(1,"month").format("YYYY-MM-DD");
        const exRateTrendData = await api.exchangeRate.getTrend();
        const exRateData = await api.exchangeRate.get(date);
        this.setState({
            dataCurrency: exRateData,dataTrend: exRateTrendData,});
    };

    render() {
       return (
         <>
            <Component1 depending on dataCurrency />
    
            <Component2 depending on dataTrend />
         </>
      )
    };

};

解决方法

使用async/await的最佳实践是将代码包装在try{}catch(){}中（您可以了解更多关于here的信息），这是因为您可以在{ {1}}，因此它们可能会分别失败：

componentDidMount

javascript reactjs reactjs