Vue 3 中的 HTTP 请求

在 Vue 3 中，我们可以使用 @vue/composition-api 插件来使用响应式的组合式 API。其中包括了封装了 axios 的 useAxios，也可以使用原生的 fetch 库或者其他的 HTTP 请求库来进行请求数据。

安装

对于使用 axios 的方式，我们需要安装 axios 和 @vue/composition-api。

npm install axios @vue/composition-api

对于使用原生 fetch 或其他 HTTP 请求库的方式，则不需要 axios 的依赖。

基本使用

axios

我们可以通过 useAxios 来使用 axios 发送 HTTP 请求。

import { useAxios } from '@vue/composition-api'

export default {
  setup() {
    const { data, error, execute } = useAxios({
      url: 'https://jsonplaceholder.typicode.com/todos/1',
    })

    execute()

    return {
      data,
      error,
    }
  },
}

在上面的代码中，我们首先使用 useAxios 定义了一个 HTTP 请求，并定义了请求的 URL。然后我们调用了 execute 方法来发送请求，最后利用 data 和 error 两个响应式变量来进行数据的处理。

fetch

使用原生的 fetch 库也非常简单。我们使用 reactive 来定义响应式的变量，并使用 async/await 语法来请求数据。

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      data: null,
      error: null,
    })

    const fetchData = async () => {
      try {
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
        state.data = await res.json()
      } catch (error) {
        state.error = error
      }
    }

    fetchData()

    return {
      ...state,
    }
  },
}

在上面的代码中，我们使用 reactive 定义了响应式的 state。然后我们使用 async/await 语法来简单地请求数据。最后，在 return 语句中，我们使用了 ES6 的扩展语法 ...state 来返回所有响应式变量。

总结

Vue 3 提供了方便的 @vue/composition-api 插件来使用组合式 API。我们可以使用 useAxios 和 reactive 来进行 HTTP 请求，并利用响应式的数据来进行处理。无论是 axios 还是原生的 fetch，都可以方便地使用 Vue 3 进行 HTTP 请求。