关于如何得到addressId

相关代码：

    const addressId=ref('')
    const getAddressList = async () => {
        const index=0
        try {
            const result = await get("api/user/address");            
            if (result.errno == 0 && result?.data?.length) {
                addressId.value = result.data[index]._id                        
            }
        } catch (e) {
            console.log(e)
        }
    };
    watchEffect(()=>{
        getAddressList();
    })

这样得到的addressId的结果是正确的。但是，我按如何代码写，为什么就不行呢？

    const addressList=ref([])    
    const getAddressList = async () => {
        const index=0
        try {
            const result = await get("api/user/address");            
            if (result.errno == 0 && result?.data?.length) {                
                addressList.value=result.data                
            }
        } catch (e) {
            console.log(e)
        }
    };
    watchEffect(()=>{
        getAddressList();
    }) 
    const addressId=addressList.value[0]._id;

先得到整个接口数据，然后再取它的一个值，这样为什么就不行呢？为什么Console窗口显示 addressList是undefined呢？在渲染页面时不是可以调用这样得到的接口数据吗？是因为需要经过setup函数return后才可以使用吗？

慕妹8003063 2021-04-10

源自：项目：仿京东到家全栈项目 4-13 本章总结

收起

2回答

好帮手慕星星 2021-04-11 15:25:33

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

1、获取数据是异步操作，需要等获取到数据才可以获取其中的_id，否则为undefined，如下

2、如果想使用全局数据，可以用app.config.globalProperties来设置，例如在main.js中定义

这里老师将数据放在属性上了，如果想写函数也可以，方法中再返回数据即可。

然后在组件中使用数据

记得要在获取数据外层加定时器，因为get数据是异步的，使用的时候也异步避免获取不到，自己试着写一写。

3、不知道同学粘贴这段代码什么意思？老师不太明白，可以描述具体一些，便于帮助解决

祝学习愉快！

收起回答

好帮手慕久久 2021-04-10 16:06:42

同学你好，解答如下：

1、按照第二种写法，控制台能够获取到addressList，不是undefined：

同学再检查一下自己的代码，看哪里不对。

2、由于addressList这个变量使用了ref包裹，所以addressList是一个响应式数据；将其在return中返回后，才能在页面上使用它：

如果想获取第一个数据的id，则可以如下这样写：

3、ref是用来将基础数据转成响应式的，数组不属于基础数据，所以如下写法不合理：

最好如下这样写：

4、如果想直接使用addressId这个变量，最好按照方式1来写。要将addressId设置成一个响应式数据，这样更改它之后，才能映射到页面上：

祝学习愉快！

收起回答

提问者慕妹8003063 #1
感谢老师的回答。但是，我想知道，虽然addressList可以获取到，为什么
```
const addressId=addressList.value[0]._id;
```
会提示： Uncaught (in promise) TypeError: Cannot read property '_id' of undefined。
我不是想在页面渲染中用addressId，而是想在接下来的函数中用，如下。
我不想使用第一种方式，即从接口数据直接得到addressId，因为有好几个页面需要从这个接口提取数据，但是用到的具体值不同，有的要用整体的addressList，有的只要里面的用户名，有的只要里面的addressId，因此，我想写一个通用的获取接口数据的事件函数，然后让各个页面来调用，而不是重复提取数据，因此想在通用函数里得到整体的addressList，然后调用的函数再通过addressList来得到里面的具体值。但是，却没能成功，我想知道如何来实现。
```
const handleConfirmPay = async (isCanceled) => {
const purchases = [];
const purchaseList=caculations.value.purchaseList
for (let key in purchaseList) {
const goods = purchaseList[key];
purchases.push({ id: goods._id , num: goods.count });
}
try {
const result = await post("/api/order", {
addressId,
shopId,
shopName: caculations.value.shopName,
isCanceled,
goods:purchases
});
if (result?.errno === 0) {
router.push({ name: "Order" });
store.commit("handleClearCart",{shopId}) ;
} else {
console.log(result)
// showToast("create order fail");
}
} catch (e) {
console.log(e)
}
};
```
2021-04-11 01:02:25