vue3 异步请求实例

在 Vue3 中，可以使用 axios 或者 fetch 进行异步请求。下面是一个使用 axios 进行异步请求的示例：

import axios from 'axios';
import { ref } from 'vue';

export default {
  setup() {
    const data = ref([]);

    axios.get('/api/data').then(response => {
      data.value = response.data;
    }).catch(error => {
      console.log(error);
    });

    return {
      data,
    };
  },
};

在这个示例中，我们首先导入了 axios 和 ref 函数。然后，我们在 setup 函数中定义了一个名为 data 的 ref 值，它用来存储从服务器获取的数据。

接下来，我们使用 axios.get 方法向服务器发起 GET 请求，并使用 then 和 catch 方法处理响应和错误。在成功获取数据后，我们将其赋值给 data.value。

最后，我们将 data 的值作为 setup 函数的返回值，这样就可以在模板中使用它了。

需要注意的是，由于 setup 函数是在组件实例化之前执行的，因此我们无法使用 this 关键字来访问组件的属性和方法。如果需要访问组件的属性和方法，可以使用 setup 函数的第二个参数来传递组件实例。例如：

import axios from 'axios';
import { ref } from 'vue';

export default {
  props: ['id'],

  setup(props, { emit }) {
    const data = ref([]);

    axios.get(`/api/data/${props.id}`).then(response => {
      data.value = response.data;
    }).catch(error => {
      console.log(error);
    });

    return {
      data,
      emit,
    };
  },
};

在这个示例中，我们定义了一个名为 id 的 props 属性，并在 setup 函数的第一个参数中访问它。我们还使用 setup 函数的第二个参数来访问 emit 方法，以便在组件中触发事件。