网站首页 > 博客文章 正文
在工作中,遇到一个需求,需要展示一个列表,第一次请求只有列表的名字,需要在知道名字的情况下,再去请求每个列表的详细信息,然后展示完整的列表信息。
经过一番研究,发现多重的请求写在页面的方法里比较好实现。其他的在effects和servers里都不太好实现。
首先我们在 componentDidMount这个生命周期里进行操作:
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'release/fetchAnnounce',
payload: {
cluster:"guanwang"
},
}).then((data)=>{
this.newResults(data)
})
};
在dispatch请求后,在.then中获取上一个请求返回的数据。然后做逐一请求的动作。
newResults方法 的书写:
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的返回就会排在最前面。
【作者:前端小陈】
猜你喜欢
- 2024-10-20 轻量级的React数据流及状态管理解决方案,支持SSR服务器端渲染
- 2024-10-20 5 分钟掌握 JavaScript 实用窍门(javascript官网)
- 2024-10-20 前端必备的20种基本React工具「干货」
- 2024-10-20 async await 并发(async await会阻塞吗)
- 2024-10-20 8 张图帮你一步步看清 async,await 和 promise 的执行顺序
- 2024-10-20 Atom源码阅读系列一(nasm源码阅读笔记)
- 2024-10-20 2019年JavaScript几个秘密窍门,你知道吗?
- 2024-10-20 小猿圈分享6个提JavaScript 小技巧(下)
- 2024-10-20 js遍历那些事儿(js遍历tr)
- 2024-10-20 Google 开源 zx,用 async/await 编写 shell 脚本
你 发表评论:
欢迎- 07-07Xiaomi Enters SUV Market with YU7 Launch, Targeting Tesla with Bold Pricing and High-Tech Features
- 07-07Black Sesame Maps Expansion Into Robotics With New Edge AI Strategy
- 07-07Wuhan's 'Black Tech' Powers China's Cross-Border Push with Niche Electronics and Scientific Firepower
- 07-07Maven 干货 全篇共:28232 字。预计阅读时间:110 分钟。建议收藏!
- 07-07IT运维必会的30个工具(it运维工具软件)
- 07-07开源项目有你需要的吗?(开源项目什么意思)
- 07-07自动化测试早就跑起来了,为什么测试管理还像在走路?
- 07-07Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
- 最近发表
-
- Xiaomi Enters SUV Market with YU7 Launch, Targeting Tesla with Bold Pricing and High-Tech Features
- Black Sesame Maps Expansion Into Robotics With New Edge AI Strategy
- Wuhan's 'Black Tech' Powers China's Cross-Border Push with Niche Electronics and Scientific Firepower
- Maven 干货 全篇共:28232 字。预计阅读时间:110 分钟。建议收藏!
- IT运维必会的30个工具(it运维工具软件)
- 开源项目有你需要的吗?(开源项目什么意思)
- 自动化测试早就跑起来了,为什么测试管理还像在走路?
- Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
- Cursor 太贵?这套「Cline+OpenRouter+Deepseek+Trae」组合拳更香
- 为什么没人真的用好RAG,坑都在哪里? 谈谈RAG技术架构的演进方向
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)