react項目中如何解決同時需要多個請求問題


 

 


 

在工作中,遇到一個需求,需要展示一個列表,第一次請求只有列表的名字,需要在知道名字的情況下,再去請求每個列表的詳細信息,然后展示完整的列表信息。

經過一番研究,發現多重的請求寫在頁面的方法里比較好實現。其他的在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的返回就會排在最前面。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM