react项目中如何解决同时需要多个请求问题

Posted 2022-01-08 荷风伊夏

 

 

 

在工作中，遇到一个需求，需要展示一个列表，第一次请求只有列表的名字，需要在知道名字的情况下，再去请求每个列表的详细信息，然后展示完整的列表信息。

经过一番研究，发现多重的请求写在页面的方法里比较好实现。其他的在effects和servers里都不太好实现。

首先我们在 componentDidMount这个生命周期里进行操作：

在dispatch请求后，在.then中获取上一个请求返回的数据。然后做逐一请求的动作。

componentDidMount() 
    const  dispatch  = this.props;
    dispatch(
      type: \'release/fetchAnnounce\',
      payload: 
        cluster:"guanwang"
      ,
    ).then((data)=>
      this.newResults(data)
    )
  ;

newResults方法 的书写：

Promise.all的讲解

 newResults=(data)=>
    const newData=[];
    data.map(item=>
      newData.push(...item)
    )
   // 异步操作，需要等待所有的请求接口完成以后，拿到全部的数据去使用
    const newResult=async ()=> 
      await Promise.all(
        newData.map((item, index) => 
          return   request(
            `/api/v1/admin/rule-set/list`
          ).then(r => 
            const val=
              
                id: index + 1,
                ...r.data[0],
                ...item
              ;
            return val
          )
        )
      ).then((values)=>
        this.setState(releaseVal:values)
      )
    
    newResult()
  ;

 

Promise.all的讲解

Promise.all在处理异步请求很有用。举个例子：

let q1 = new Promise((resolve, reject) => 
  resolve(\'处理成功了\')
)

let q2 = new Promise((resolve, reject) => 
  resolve(\'success\')
)

let q3 = Promse.reject(\'error\')

Promise.all([q1, q2]).then((res) => 
  console.log(res)               //[\'处理成功了\', \'success\']
).catch((error) => 
  console.log(error)
)

Promise.all([q1,q3,q2]).then((res) => 
  console.log(res)
).catch((error) => 
  console.log(error)      // 失败了，打出 \'error\'
)

 

它可以让你等待所有的操作完成后进行操作，而且它完成的返回结果是按 q1,q2,q3的顺序来的。不会因为p2的结果先出来就排在最前面。

知道Promise.all,就相对于的可以了解一下Promise.race

Promise.race的使用方法和Promise.all差不多。唯一的不同就是返回的顺序不同，Promise.race是按照运行的先后顺序进行排列的。假如q2先完成，q2的返回就会排在最前面。