关于这个错误,我先百度来着,但相关解决很少,而且是让修改浏览器中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);

在这里插入图片描述发现可以生成 包含数据的弹窗!
这就说明获取数据是ok的。

然后就试试

  1. 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);

在这里插入图片描述哦!可喜可贺,居然也可以显示出来5555┭┮﹏┭┮

  1. 正儿八经在网页显示数据呢???

不用说,就是出现图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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐