异步请求按照顺序返回

期望效果：

bug：路由上的id有4个，对应的4个tab，加载此页面时请求四个的所有内容，需要发送4个_apiServerDetailById(id)查询详情请求，代码如

下：

class DeployTest extends React.PureComponent {
  constructor(props) { // state中的数据要使用到props时，使用constructor(props)结构体方式
    super(props)
    const idArr = this.props.match.params.id.split('&')
    this.state = {
      idArr: idArr, // [1272715127132463106,1272715127170211841,1272715127207960577,1272715127245709313]
      deployShow: []
    }
  }

  componentDidMount() {
    let deployShow = []
    this.state.idArr.forEach(id => {
      _apiServerDetailById(id).then(res => {
        if (res.code === 200) {
          deployShow.push(res.data)
          this.setState({deployShow: [...deployShow]})
        }
      })
    })
  }

会出现tab名称与id顺序没有对应，效果图如下：

解决方案：首先定义好一个指定顺序的数组，之后将请求响应放入指定位置，就会一一对应了

class DeployTest extends React.PureComponent {
  constructor(props) {
    super(props)
    const idArr = this.props.match.params.id.split('&')
    this.state = {
      idArr: idArr,
      // 定义好一个指定顺序（依据id指定）的数组
      deployShow: idArr.map(data => {
        return {
          id: data,
          data: {}
        }
      }),
    }
  }

  componentDidMount() {
    this.state.idArr.forEach(id => {
      _apiServerDetailById(id).then(res => {
        if (res.code === 200) {
          const deployShow = this.state.deployShow
          const index = deployShow.findIndex(ele => ele.id === id) // 找到指定位置放入
          deployShow[index].data = res.data
          this.setState({deployShow: [...deployShow]})
        }
      })
    })
  }