Vue一个组件依赖另一个组件的Api请求结果，如何做到按照顺序取得数据

Vue一个组件依赖另一个组件的Api请求结果，如何做到按照顺序取得数据

前言

我知道我很菜，但是还是想记录下开发过程中的喜悦，如果这篇文章有帮到你，那我会非常开心。

如果你两个请求都放在了一个组件里面，那这篇文章看到这里就不适合您了，您可以叉掉退出。

如果你两个请求需要分开，分别放在不相同的组件中，又不好搞成 Promise.all 类似的操作，那么这篇文章可能会帮助到你

需求

先来看需求，上伪代码：

假设我有两个组件，UserStatusBar , ShoppingCart (用户状态栏组件 和 购物车组件)

我 购物车组件 在加载完毕后需要使用到 状态栏组件 加载完毕后发起的请求，请求成功后获取到的 userId 值

然后购物车拿到这个 userId 去查表，得出购物车中的商品信息，流程如下图：

异步的好处就不说了，来说说坏处

坏处其实就是 异步的不确定性，但是我们还是有其它的手段来解决这个不确定性，如 Promise.all, 控制组件的加载顺序（指定组件后期动态渲染），这些都可行的方案

熟悉的小伙伴都知道，假设我 A 请求先发起，再发起B 请求，顺序上没毛病，但有可能是B请求先得到数据，而A请求的数据却姗姗来迟，最后B所依赖的 A的数据无法得到正确的值的时候就发起了请求，这就不符合我们所想了

在说这段话的时候，我是有技巧和手段来使得两个组件中的这两个请求 按照我想要的顺序来发起的！

前期思路

按照需求来写可能会这么想：

// UserStatusBar 首先加载
<template>
	<div> content </div>
</template>
<script>
	export default{
        name:'UserStatusBar',
        data(){
            return{
                //
            }
        },
        mounted:{
            Api.getUserInfo().then(res=>{
        		// 获取到用户信息成功后 设置用户状态
        		setUserInfo() 
    		}).catch(err=>{
                
            })
        }
    }
</script>

setUserInfo() 为伪代码，假设获取到了数据后就存在了 userId 且有值

接下来在购物车组件中 拿到 userId 发起请求

// ShoppingCart 其次加载
<template>
	<div> content </div>
</template>
<script>
	export default{
        name:'ShoppingCart',
        data(){
            return{
                //
            }
        },
        mounted:{
            let data = {
            	userId:this.$store.userInfo.userId  // 我要拿到正确的userId
        	}
            Api.ge