在现代Web应用程序开发中，经常需要使用Ajax技术进行与服务器的交互，以获取数据、发送请求或更新数据等。Vue3是一种流行的JavaScript框架，为我们提供了许多工具和库来简化和优化与服务器的通信。其中一个常用的工具是axios，它是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中发送HTTP请求。本文将详细介绍Vue3中使用axios进行Ajax请求的方法和技巧。
安装axios
要在Vue3中使用axios，首先需要安装axios包。你可以使用npm或yarn来安装axios：
npm install axios
或者
yarn add axios
安装完成后，可以在项目中引入axios，并开始使用它进行Ajax请求。
发送GET请求
使用axios发送GET请求非常简单。只需调用axios的get方法，并传递URL作为参数即可。例如，我们要获取一个名为users的用户列表：
import { ref } from 'vue'
import axios from 'axios'
const getUsers = async () => {
try {
const response = await axios.get('https://api.example.com/users')
return response.data
} catch (error) {
console.error(error)
}
}
export default {
setup() {
const users = ref([])
getUsers().then(data => {
users.value = data
})
return {
users
}
}
}
在上述代码中，我们首先引入了Vue3的ref函数和axios。然后，我们定义了一个名为getUsers的异步函数。该函数发送一个GET请求到https://api.example.com/users，并返回响应数据。
在setup函数中，我们创建了一个名为users的ref响应式对象，并调用getUsers函数来获取用户列表数据。一旦数据返回，我们将其保存到users对象中。
发送POST请求
与发送GET请求类似，使用axios发送POST请求也非常简单。只需调用axios的post方法，并传递URL和请求数据作为参数即可。例如，我们要创建一个新用户：
import axios from 'axios'
const createUser = async (user) => {
try {
const response = await axios.post('https://api.example.com/users', user)
return response.data
} catch (error) {
console.error(error)
}
}
export default {
setup() {
const handleCreateUser = async () => {
const newUser = { name: 'John Doe', email: 'john@example.com' }
const createdUser = await createUser(newUser)
console.log(createdUser)
}
return {
handleCreateUser
}
}
}
在上述代码中，我们定义了一个名为createUser的异步函数。该函数发送一个POST请求到https://api.example.com/users，并传递待创建的用户数据作为参数。
在setup函数中，我们创建了一个名为handleCreateUser的函数。当调用handleCreateUser时，它会创建一个新用户，并将创建的用户数据打印到控制台。
错误处理
在向服务器发送请求时，我们必须考虑错误处理。axios提供了一个捕获错误的机制，可以使用try-catch语句来处理请求过程中出现的错误。
try {
const response = await axios.get('https://api.example.com/users')
return response.data
} catch (error) {
console.error(error)
}
在上述代码中，我们使用try-catch语句来捕获错误。如果请求过程中出现错误，将会在控制台输出错误信息。
你还可以根据不同的错误类型执行特定的操作。例如，如果服务器返回404错误，你可以执行一些特定的错误处理逻辑：
try {
const response = await axios.get('https://api.example.com/users')
return response.data
} catch (error) {
if (error.response.status === 404) {
console.log('User not found')
} else {
console.error(error)
}
}
在上述代码中，我们检查错误对象的response属性的status值。如果该值为404，表示用户未找到，将在控制台打印"User not found"。否则，将打印错误信息。
请求拦截器和响应拦截器
axios还提供了请求拦截器和响应拦截器，用于在请求发送前和响应返回后对请求和响应进行处理。
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
console.log('Before request')
return config
}, error => {
// 对请求错误做些什么
console.error(error)
return Promise.reject(error)
})
在上述代码中，我们通过axios.interceptors对象来设置请求拦截器。request.use方法接收两个回调函数，第一个用于处理请求发送前的逻辑，第二个用于处理请求发生错误的情况。
类似地，我们还可以设置响应拦截器：
axios.interceptors.response.use(response => {
// 对响应数据做点什么
console.log('After response')
return response
}, error => {
// 对响应错误做点什么
console.error(error)
return Promise.reject(error)
})
在上述代码中，我们通过axios.interceptors对象来设置响应拦截器。response.use方法接收两个回调函数，第一个用于处理响应返回后的逻辑，第二个用于处理响应发生错误的情况。
拦截器可以用于在请求发送前添加请求头、在响应返回后处理响应数据等操作。例如，我们可以添加一个认证令牌到每个请求的请求头中：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
console.error(error)
return Promise.reject(error)
})
在上述代码中，我们从localStorage中获取令牌，并将其添加到请求头的Authorization字段中。
总结
本文详细介绍了在Vue3中使用axios进行Ajax请求的方法和技巧。我们讨论了如何安装axios包、发送GET和POST请求，以及如何处理错误、使用拦截器等。
