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提供了丰富的功能和选项，能够满足不同场景中的网络请求需求。希望本文能对你有所帮助！
