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

荷風伊夏 2022-01-07 18:19:06 阅读数:507

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的返回就會排在最前面。

 

版权声明:本文为[荷風伊夏]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201071819059896.html