在工作中,遇到一個需求,需要展示一個列表,第一次請求只有列表的名字,需要在知道名字的情況下,再去請求每個列表的詳細信息,然后展示完整的列表信息。
經過一番研究,發現多重的請求寫在頁面的方法里比較好實現。其他的在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的返回就會排在最前面。