前端联调时addressId要怎么获得

老师，我想用/api/address的接口先获取整个addressList，然后用数组里面第一个元素作为默认地址，然后将addressId先设定为第一个元素的_id。

然后将addressId用于获取第二次的接口/api/address/:addressId。但是我测试下来addressId返回的都是空，请问是哪里出错了？

还有addressId是该用响应式赋值ref吗？还是直接用空字符串赋值var addressId = ''？这里感觉前端学的时候不是很扎实，漏洞很多。

<template>
<div class="top">
<div class="top__header">
<Back class="top__header__back" iconColor="#FFFFFF" />
<p>确认订单</p>
</div>
<div class="top__receiver">
<div class="top__receiver__title">收货地址</div>
<div class="top__receiver__address">
上海
</div>
<div class="top__receiver__info">
<span class="top__receiver__info__name">大神</span>
<span class="top__receiver__info__phone">13800138000</span>
</div>
<div class="top__receiver__icon iconfont">&#xe609;</div>
</div>
</div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
import { get } from '../../utils/request';
import Back from '../../components/Back.vue';

const useAddressListEffect = () => {
  const addressId = ref('')
  const getAddressList = async () => {
    const result = await get('/api/address');
    // console.log(result.data);
    if (result?.errno === 0 && result?.data?.length) {
      result.data.forEach((item, index) => {
        if (index === 0) {
          addressId.value = item._id;
        }
      });
    }
  };
  console.log(addressId.value);
  return { addressId, getAddressList };
};

const useAddressEffect = addressId => {
  const data = reactive({ address: {} });
  const getAddress = async () => {
    console.log(`/api/address/${addressId.value}`);
    const result = await get(`/api/address/${addressId.value}`);
    console.log(result.data);
    if (result?.errno === 0 && result?.data?.length) {
      data.address = result.data;
    }
  };
  const { address } = toRefs(data);
  return { getAddress, address };
};

export default {
name: 'OrderConfirm',
components: { Back },
setup() {
    const { addressId, getAddressList } = useAddressListEffect();
    getAddressList();
    const { getAddress, address } = useAddressEffect(addressId);
    getAddress();
    return { address };
  }
};
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';
@import '../../style/mixins.scss';
.top {
position: relative;
background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #4da5e8 50%);
&__header {
height: 0.685rem;
text-align: center;
margin: 0 0.18rem;
position: relative;
padding-top: 0.26rem;
&__back {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 0.2rem;
height: 0.3rem;
}
p {
font-family: PingFangSC-Regular;
font-size: 0.16rem;
color: $white-bgColor;
}
}
&__receiver {
margin: 0 0.18rem;
padding: 0.16rem 0.4rem 0.16rem 0.16rem;
background: $white-bgColor;
border-radius: 0.04rem;
position: relative;
&__title {
font-family: PingFangSC-Medium;
font-size: 0.16rem;
line-height: 0.22rem;
color: $content-fontcolor;
margin-bottom: 0.14rem;
}
&__address {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
line-height: 0.2rem;
color: $content-fontcolor;
margin-bottom: 0.06rem;
@include ellipsis;
}
&__info {
font-family: PingFangSC-Regular;
font-size: 0.12rem;
line-height: 0.17rem;
color: $medium-fontColor;
span {
margin-right: 0.1rem;
}
}
&__icon {
color: $medium-fontColor;
position: absolute;
right: 0.16rem;
top: 50%;
transform: translate(0, -50%);
}
}
}
</style>

同学你好，问题解答如下：

1、由于老师没有同学的接口，无法获取到数据，因此没办法提供具体的解答，只能简单模拟一下同学的操作，看如下描述能否给同学带来帮助。

模拟代码如下：

运行结果如下：

其中第一行打印是空，应该就对应着同学如下位置：

原因是请求数据的过程是异步的， console.log(addressId.value)这句代码执行时，数据并没有请求回来，所以打印是空：

老师这里，第二行打印是能获取到addressId的：

同学参考上面描述，再调试一下自己的代码。

2、如果数据需要联动（只要某个方法中改变了数据，数据就要同步更新），那么建议使用响应式的数据，因此addressId要用ref包裹。

祝学习愉快！