项目场景：

后端：现在线上由于并发请求太多了，要是有那么一两个请求响应慢了一点的话，非常容易超时然后挂掉。
理想的我：请求响应慢也找我，真当我前端好欺负？
真实的我：行吧大哥，那我这边控制一下同时请求的次数，做一个分批次请求，你看这样行不？

后端：这还差不多，别一次性给我那么多请求，我处理不过来，我不想改代码
理想的我：我X你XX的，你不想改就丢给我，才13个请求就整不动了？想想双11人家的后端要处理那么多高并发，你TM菜的抠脚
真实的我：好嘞，我看了一下，谷歌最高支持6个并发请求，那我就分三组吧，每组4个请求，你看可以不

后端：行吧，先这样吧，快点啊，项目着急上呢，慢了到时候又是你的锅，懂？
理想的我：我TM遇上你这个吊毛，算我倒霉，先让你嚣张吧，老子明天就离职跑路，你个栽种。
真实的我：行嘞，咱前端是啥呀，不就是背锅的么，你放心瞧好吧，不管最后咋样，锅只管给我背上就行！

问题描述：

别问我为啥要给我13个接口，我啥也不知道，我啥也不想说

问题1：子组件过多，如何控制组件请求的先后顺序

讯享网

问题2：就算能控制每个组件执行的先后顺序，但是每个组件里面的axios请求又如何控制先后呢？

【一眼看下来，其实本篇文章的核心就是处理问题1和问题2】

原因分析：

其实造成 问题1的原因很矛盾，很纠结，以至于到现在写这篇文章的时候，我也没有想到一个好的优化方式
什么原因呢？
其实，就是组件拆分过多引起的，如果我不拆组件，页面就一个大的组件展示，那我可以很优雅的处理掉问题1，
因为，在一个组件里面完成所有的请求，哪还有什么组件执行先后的破事啊，问题1直接跳过了好吧
但是，拆了就拆了吧，至少组件化以后，代码量明显减少了，而且改的时候只需要找到对应的组件就行了

所以，凡事有利有弊，我享受了组件化拆分带来的利，就不得不面对组件通信带来的弊。

造成问题2的原因，U1S1，是我最开始没考虑周全，从没想过 要处理异步执行先后的问题
只想着在每个组件的created里面依次请求就行了，因为在本地测试的时候，一点问题都没有，后端那边的响应，
也是非常快的，都在ms以内就响应了，

现在想想，确实不应该那样做，一股脑地请求，想想都觉得可怕。

【这次也算是 做了一次 前端性能调优吧，哈哈】

解决方案：

解决问题2（优先）：

在网上溜达一圈以后，收集了几种处理这个问题的办法

1. ES6 Promise 链式写法，调用请求
2. async/await 语法糖 + Promise 联合改造请求方式
   3. 最原始的方法，回调嵌套，（现在没人会这样做，因为一点也不优雅）

关于Promise不用多说，天生就是来处理这个问题的：

方案一:

【核心代码示例】

同时发送三个请求 get_group_1: function () { 
    this.$axios .all([this.handleAll(), this.handlecityTop(), this.handlesbsTop()]) .then( this.$axios.spread(function (res_1, res_2, res_3) { 
    console.log("===组1请求完成==="); console.log("请求1结果", res_1); console.log("请求2结果", res_2); console.log("请求3结果", res_3); }) ) .catch((error) => { 
    console.dir(error); }); }, 链式写法 控制请求 get_group_all: function () { 
    new Promise((resolve, reject) => { 
    resolve(this.get_group_1()); }) .then((group_1) => { 
    console.log("===", group_1); return new Promise((resolve, reject) => { 
    resolve(this.get_group_2()); }); }) }, 最后在created里面调用 get_group_all 即可 created() { 
    this.get_group_all() }, 

方案二：（参考）

其实我最开始用的就是 async/await ，毕竟这两个搭配起来用也容易理解，毕竟是已经写好的语法糖，直接用多爽啊
而且最关键的一点-------它们就是为了把异步任务 给 规定成 同步任务来执行 而存在的
在 async函数里面，规定 带有 await 关键字的函数 一个一个地执行，谁也不许插队
达到 用同步的方式，执行异步操作的效果

【如图】

【单个请求的改造】

【核心代码】

讯享网handleAll() { 
    return new Promise((res,rej) =>{ 
    this.$axios({ 
    url: "", method: "POST", responseType: "json", data: "", }) .then((data) => { 
    // console.log(data); res() }) .catch((error) => { 
    console.log(error); rej() }); }) }, 

ok，两种方法已经实现了，此时打开Network 就会看到请求顺序已经完成两组分批次请求，此时如果问题1解决了的话，
那么就可以实现13个请求，分多组请求的操作，问题就可以完美解决了。

解决问题1：

其实说实话，这个问题处理起来，也许会有更优的方案，如果有大佬看到觉得下面这个方案垃圾，欢迎交流。

我：师父，每个组件我如何能控制它的执行顺序啊，我想先A组件发完请求，B组件接着发，依次传递下去
师父：啊这…都…不…会，腻载淦神魔？ 一天天的真不让人省心啊，你这臭小子想气死师父啊，咳…
我：师父！别动气，你听我说，我悟了，这样行不行

首先，需要找一个公共的东西来 记录每个组件 传递的状态 ，可以是 $bus 或者 $root，然后在首个需要发送请求的组件里面
$emit触发一个自定义的事件，来传递一个参数，比如就传递一个数字 1 ，
在下一个 组件里面 $on 来 监听 这个事件 再 if判断一下这个参数是多少，如果是1，OK，就执行发送请求的操作
依次传递下去，就有点像 击鼓传花的感觉

师父：想的挺美，那你的 $emit 要放在哪里触发呢，这可都是异步请求哟
我：师傅别急，之前我已经用了Promise了，在链式写法那里，大不了再多写一个then，放里面应该没问题把
师父：行吧，先这样吧，我告诉你，以后少拿这些破事来打扰我摸鱼，给我滚一边去
我：好嘞师父，徒儿这就滚，嘻嘻

图示解答：

步骤1：

步骤2：

依次往下触发即可，到最后一个组件，不用触发，只需要监听传过来的参数
这样就实现了 最终的目标，分批次请求，
说真的，以后能不拆组件就不拆组件吧，也算是自己把自己给坑了

能力一般，水平有限，一起进步。

时间线2021-09-16==
放两张图对比一下，一张限制了请求，一张没有限制

有限制请求：

没有限制请求：