vue3axios怎么用

Vue3中使用axios

在Vue3中，可以使用axios来进行网络请求。axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js，非常便捷和强大。

安装axios

在开始之前，首先需要安装axios。可以通过npm或者yarn来安装：

npm install axios

引入axios

在Vue3中，可以使用import来引入axios：

import axios from 'axios'

发送GET请求

发送一个GET请求非常简单，只需要调用axios的get方法并提供URL即可。axios返回的是一个Promise对象，我们可以使用.then和.catch来处理响应结果或者错误。

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

发送POST请求

发送一个POST请求也很简单，只需要调用axios的post方法并提供URL和数据即可。同样，axios返回的是一个Promise对象，我们可以使用.then和.catch来处理响应结果或者错误。

axios.post('/api/data', { name: 'John', age: 30 })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

设置请求头

有时候我们需要设置请求头，比如发送带有Token的请求。可以通过在axios的配置中设置headers来实现：

axios.get('/api/data', {
  headers: {
    Authorization: 'Bearer ' + token
  }
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

取消请求

在某些情况下，我们可能需要取消一个正在进行的请求。axios提供了一个cancelToken的机制来实现这个功能。可以使用axios.CancelToken.source来创建一个cancelToken对象，并将其传递给请求配置的cancelToken属性。然后，可以调用cancel方法来取消请求。

const source = axios.CancelToken.source()

axios.get('/api/data', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message)
    } else {
      console.error(error)
    }
  })

// 取消请求
source.cancel('Operation canceled by the user.')

配置全局axios实例

除了上述的用法，我们还可以配置全局的axios实例，以便在整个应用中共享相同的配置。

import axios from 'axios'

const instance = axios.create({
  baseURL: '
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 发送GET请求
instance.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

// 发送POST请求
instance.post('/api/data', { name: 'John', age: 30 })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

通过这种方式，我们可以配置全局的baseURL、timeout和headers，避免在每个请求中重复设置。

以上就是在Vue3中使用axios的基本方法和用法。axios提供了丰富的功能和选项，能够满足不同场景中的网络请求需求。希望本文能对你有所帮助！