Vue中如何等待getData的fetch请求完成后再打印detaliiMP数组？

你遇到的核心问题是fetch属于异步操作，调用this.getData()后不会等待数据返回就直接执行console.log，所以打印的始终是初始状态的空数组。下面是两种可行的解决方法：

方法一：用async/await改造方法 #

1. 将getData改为异步函数，通过await等待fetch请求和数据解析完成：

async getData() {
  try {
    const res = await fetch("https://random-data-api.com/api/v2/users?size=5");
    const data = await res.json();
    this.detaliiMP = data;
  } catch (err) {
    console.error(err.message);
  }
}

2. 给showData也添加async标识，并用await等待getData执行完毕后再打印数组：

async showData() {
  await this.getData();
  console.log(this.detaliiMP);
}

方法二：利用Promise链等待结果 #

如果不想使用async/await，也可以让getData返回Promise链，在showData中通过then回调等待数据填充完成：

getData() {
  return fetch("https://random-data-api.com/api/v2/users?size=5")
    .then(res => res.json())
    .then(data => {
      this.detaliiMP = data;
    })
    .catch(err => console.error(err.message))
}

showData() {
  this.getData().then(() => {
    console.log(this.detaliiMP);
  });
}

修改后的完整JS代码 #

const app = Vue.createApp({
  data() {
    return {
      detaliiMP: []
    }
  },
  methods: {
    async getData() {
      try {
        const res = await fetch("https://random-data-api.com/api/v2/users?size=5");
        const data = await res.json();
        this.detaliiMP = data;
      } catch (err) {
        console.error(err.message);
      }
    },
    async showData() {
      await this.getData();
      console.log(this.detaliiMP);
    }
  },
})

app.mount('#app')

内容的提问来源于stack exchange，提问作者kevsterdev