【vue js】网页显示 [object Promise] 错误

- 日理万妓 2023-10-08 22:57 30阅读 0赞

关于这个错误，我先百度来着，但相关解决很少，而且是让修改浏览器中console的配置。  
实际上，不一定console有问题呢。

先说代码长这样，是想用axios.get()去获得json数据：

axios.get('http://xxx.xxx.xxx:8080/api/xxx?id='+ user_id.value)
                  .then(
                         response => {
                         // 就是这里需要我们尝试不同的语句！！！
                  })
                  .catch(error => error);

我的思路是先看 是否能获取数据，即

**1. 先用alert(response.data)**

axios.get('http://xxx.xxx.xxx:8080/api/xxx?id='+ user_id.value)
                  .then(
                         response => {
                         // 这里写的就是alert()
                         return alert(response.data)
                  })
                  .catch(error => error);

![1e5bfac92b52311d7449edfda3960d01.png][]

发现可以生成 包含数据的弹窗！  
这就说明获取数据是ok的。

然后就试试

**2. console.log()，看控制台下的显示是否Ok**

axios.get('http://xxx.xxx.xxx:8080/api/xxx?id='+ user_id.value)
                  .then(
                         response => {
                         // 这里写的就是console.log()
                         return console.log(response.data)
                  })
                  .catch(error => error);

![314a70c6617fb0f5fa715e9d386db494.png][]

哦！可喜可贺，居然也可以显示出来

**3. 正儿八经在网页显示数据呢？？？**

不用说，就是出现图1那种 \[object Promise\]

axios.get('http://xxx.xxx.xxx:8080/api/xxx?id='+ user_id.value)
                  .then(
                         response => {
                         // 这里写的就是返回数据
                         return response.data
                  })
                  .catch(error => error);

这是为啥呢？？\[object Promise\]，查询后发现大概率是同步异步问题，

更详细来说是，axios.get()为异步函数，现在要用以同步？（大概这个意思）

直接上解决方法，因为我现在也还不太懂原理…

首先，在声明处，初始化一个变量，用于存储数值。。同时，如果之后发现没有作用，记得加上ref （import \{reactive, ref\} from “vue”;）

import {reactive, ref} from "vue";
    
    export default {
        name: "dashboard",
    
        setup() {
            // 像我这里的curCount1
    			 const curCount1 = ref(0)

随后在我们 获取后端数据 函数里，这么书写：

function module_1() {
                  axios.get('http://xxx.xxx.xxx/api/xxx?id='+ user_id.value)
                  .then(
                         response => {
                         // 就还是修改这里！
                         curCount1.value = response.data
                  })
                  .catch(error => error); 
            }

随后记得在export default 最后的return里写上：

return {
    					// 没错，咱的函数名 和 这个变量
                module_1,
                curCount1
            };

最后，在显示部分(<template)里，显示的那部分前面加上 module\_1 以调用函数、改变变量值，然后显示 变量curCount1。

<div>用户总数</div>
    			// 调用函数
    			{
       {module_1()}}
    			// 显示变量值（以为之前把后端获取数据存在变量里了！）
    			<div class="grid-num">{
       {curCount1}}</div>

原文链接： https://blog.csdn.net/qq\_36148333/article/details/121724267

[1e5bfac92b52311d7449edfda3960d01.png]: https://img-blog.csdnimg.cn/img_convert/1e5bfac92b52311d7449edfda3960d01.png
[314a70c6617fb0f5fa715e9d386db494.png]: https://img-blog.csdnimg.cn/img_convert/314a70c6617fb0f5fa715e9d386db494.png