Vue.js 3.0：如何使用ajax来获取数据？

2023-02-12 14:15:30

在 Vue.js 3.0 中灵活运用 AJAX 获取数据

在 Web 开发中，发送 AJAX 请求获取数据至关重要。Vue.js 3.0 引入了一系列新功能和插件，让这一过程变得更加简单和灵活。在这篇文章中，我们将探讨在 Vue.js 3.0 中发送 AJAX 请求的各种方法。

Composition API

Vue.js 3.0 中的 Composition API 提供了 useAsyncData 钩子，让开发者能够使用简洁的语法获取异步数据。它接受一个函数作为参数，该函数返回一个 Promise，进而发起 AJAX 请求。

import { useAsyncData } from 'vue'

export default {
  setup() {
    const data = useAsyncData('fetchUserData', async () => {
      const response = await fetch('/api/user')
      return response.json()
    })

    return {
      data
    }
  }
}

在这个例子中，useAsyncData 钩子用于从 /api/user 端点获取用户数据。你可以根据自己的需求自定义异步数据源的名称 fetchUserData。异步函数将向该端点发送请求，并等待响应。一旦响应返回，它将被解析为 JSON 并作为 data 属性返回。

Vue.js 插件

如果你熟悉 jQuery 或 Axios，你可以在 Vue.js 3.0 中继续使用它们。Vue.js 提供了一个名为 Axios 的官方插件，它提供了一种更方便的方式来发送 AJAX 请求。

import Vue from 'vue'
import Axios from 'axios'

Vue.use(Axios)

export default {
  methods: {
    async fetchUserData() {
      const response = await this.$axios.get('/api/user')
      return response.data
    }
  }
}