Promise.all的实际运用

初级的CV工程师

已于 2022-07-28 11:39:39 修改

阅读量313

点赞数

文章标签：开发语言 javascript react.js 性能优化

于 2022-07-28 11:39:10 首次发布

本文链接：https://blog.youkuaiyun.com/m0_45219210/article/details/126030797

版权

本文通过一个实际项目案例，展示了如何利用Promise.all同时发送多个API请求，简化代码并显著提高加载速度。在原先的实现中，加载动画显示和关闭、数据存储过程繁琐且耗时较长。在师傅的指导下，作者改用Promise.all，将两个请求合并为一次并发操作，成功后一次性更新状态，大大减少了loading时间，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，Promise.all这个api可以同时发送多个Promise实例。返回一个新的Promise实例, 只有所有的promise都成功时才会返回成功的Promise, 只要有一个失败了就直接失败。

但是在实际的项目中没有用到过

在近期的项目需求中，有一个点击查看会发两个请求分别去查找对应的电话记录和邮箱记录。然后把结果进行存储后使用。由于在数据请求之前要加loading动画。开始的时候我是在第一个请求前开始显示loading，然后在第一请求的.then后面去调用第二个请求的函数。在第二个请求的.then的后面关闭loading。还要把第一个请求的数据在state里面进行备份。总而言之，特别麻烦才把需求给实现，并且loading的时间特别长。

师傅检查我代码的时候说让我用Promise.all的方法实现一下

然后我才想到这个api，最终代码如下。

返回的结果也是一个数组。Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即getCallRecord 的结果在前，即便getCallRecord 的结果获取的比getEmailsRecord 要晚。然后用setState赋值。最后去使用。

这样是两个请求都成功了。

componentDidMount() {
		//获取所有数据
		this.getAllData();
	}
	getAllData = () => {
		const {invitationId} = this.props;
		this.setState({loading: true});
		let getCallRecord = ajaxService.getSelfInviteCallsRecord({invitationId: invitationId});
		let getEmailsRecord = ajaxService.getSelfInviteEmailsRecord({invitationId: invitationId});
		Promise.all([getCallRecord, getEmailsRecord]).then(values => {
			this.setState({callRecordList: values[0]?.data || [], emailsRecord: values[1]?.data || [], loading: false});
		});
	};

写完代码的第一感受就是：本来几十行的代码现在几行就搞定了，然后去测试了下功能，速度比刚才快了很多。