關(guān)于這個(gè)錯(cuò)誤，我先百度來著，但相關(guān)解決很少，而且是讓修改瀏覽器中console的配置。
實(shí)際上，不一定console有問題呢。
先說代碼長(zhǎng)這樣，是想用axios.get()去獲得json數(shù)據(jù)：
axios.get('http://xxx.xxx.xxx:8080/api/xxx?id='+ user_id.value)
.then(
response => {
// 就是這里需要我們嘗試不同的語句?。。?
})
.catch(error => error);
我的思路是先看 是否能獲取數(shù)據(jù)，即
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);
發(fā)現(xiàn)可以生成 包含數(shù)據(jù)的彈窗！
這就說明獲取數(shù)據(jù)是ok的。
然后就試試
2. console.log()，看控制臺(tái)下的顯示是否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);
哦！可喜可賀，居然也可以顯示出來
3. 正兒八經(jīng)在網(wǎng)頁顯示數(shù)據(jù)呢？？？
不用說，就是出現(xiàn)圖1那種 [object Promise]
axios.get('http://xxx.xxx.xxx:8080/api/xxx?id='+ user_id.value)
.then(
response => {
// 這里寫的就是返回?cái)?shù)據(jù)
return response.data
})
.catch(error => error);
這是為啥呢？？[object Promise]，查詢后發(fā)現(xiàn)大概率是同步異步問題，
更詳細(xì)來說是，axios.get()為異步函數(shù)，現(xiàn)在要用以同步？（大概這個(gè)意思）
直接上解決方法，因?yàn)槲椰F(xiàn)在也還不太懂原理…
首先，在聲明處，初始化一個(gè)變量，用于存儲(chǔ)數(shù)值。。同時(shí)，如果之后發(fā)現(xiàn)沒有作用，記得加上ref （import {reactive, ref} from “vue”;）
import {reactive, ref} from "vue";
export default {
name: "dashboard",
setup() {
// 像我這里的curCount1
const curCount1 = ref(0)
隨后在我們 獲取后端數(shù)據(jù) 函數(shù)里，這么書寫：
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 {
// 沒錯(cuò)，咱的函數(shù)名 和 這個(gè)變量
module_1,
curCount1
};
最后，在顯示部分(<template)里，顯示的那部分前面加上 module_1 以調(diào)用函數(shù)、改變變量值，然后顯示 變量curCount1。
<div>用戶總數(shù)</div>
// 調(diào)用函數(shù)
{{module_1()}}
// 顯示變量值（以為之前把后端獲取數(shù)據(jù)存在變量里了！）
<div class="grid-num">{{curCount1}}</div>
原文鏈接： https://blog.csdn.net/qq_36148333/article/details/121724267
