网络请求并发

原创已于 2022-12-14 15:47:14 修改 · 907 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#网络 #前端

于 2022-02-24 14:30:31 首次发布

笔记专栏收录该内容

42 篇文章

订阅专栏

本文探讨了在大数据场景下，通过axios.all和Promise.all实现多个API请求的并发，以减少页面加载时间。作者分享了如何使用axios.all进行并发请求，并展示了如何通过async/await优化请求流程，即使在请求失败的情况下也能获取其他成功的响应。这一优化策略对于提升用户体验具有重要意义。

场景

要求从大数据拉取数据，用图表得方式展示给页面，8个图表，耗时20s以上，简直无法忍受。

解决

重新看axios文档，发现了axios.all，每次都能看到但是不理解什么时候用。现在终于可以派上用场了嘿。
非常美好：
在这里插入图片描述

当遇到很多个请求，而且数据量巨大，而且互不影响得时候麻烦考虑一下并发，可以大大减少页面加载时间

其他请求信息

'application/x-www-form-urlencoded’请求

//  测试
test() {
 return service.httpService({
	baseURL: service.dfasAuthCenter,
	url: "/api/org/test",
	method: "post",
	data: "code='001'&name='002'",
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded',
	  }
});
}

优化：async+await 结合promise.all实现并行请求

async httpGetDeadlineBonds(_, params, { getState }) {
    const [result0, result1] = await Promise.all([getDictionaryDeatil({parentDicCode: "1000103"}), getDeadlineBonds(params)]);
    }

又一次优化：关于promise，当并行请求时，有一次执行失败，想要获取其他成功的内容。