Vue3 Axios 终止请求
引言
在开发前端应用程序时，经常会遇到需要发送网络请求的场景。而使用Axios库是一种常见的方式，它提供了一个简洁、灵活和强大的API来处理HTTP请求。然而，在某些情况下，我们可能需要终止正在进行的请求，例如用户切换页面或取消操作。本文将介绍如何在Vue3中使用Axios进行请求终止。
Axios 简介
Axios 是一个基于Promise的HTTP客户端库，可以在浏览器和Node.js中使用。它具有以下特点：
- 支持浏览器和Node.js环境
- 提供了简洁而强大的API
- 支持请求和响应拦截器
- 具有自动转换请求和响应数据的功能
- 提供了丰富的参数配置选项
Axios 在Vue项目中的使用非常广泛，尤其是在与后端API进行交互时。下面我们将介绍如何在Vue3中使用Axios，并终止请求。
安装和配置 Axios
首先，我们需要安装Axios库。在Vue项目中，可以通过以下命令使用npm安装Axios：
npm install axios
安装完成后，我们需要在Vue应用程序的入口文件中进行配置。可以在 main.js 文件中添加以下代码：
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
// 配置 Axios
axios.defaults.baseURL = '
axios.defaults.timeout = 5000
const app = createApp(App)
app.mount('#app')
在上面的代码中，我们通过调用 axios.defaults 对象来配置全局的基本URL和超时时间。这样，在发送请求时，不需要重复指定这些选项。
发送请求
在Vue3中，我们可以使用 setup 函数来发送请求。在组件中，可以使用 reactive 函数创建一个响应式的 axios 对象，并在需要发送请求时使用它。
下面是一个示例组件，用于向后端API发送POST请求：
<template>
<button @click="sendRequest">发送请求</button>
</template>
<script>
import { reactive } from 'vue'
import axios from 'axios'
export default {
setup() {
const axiosInstance = reactive(axios.create())
const sendRequest = async () => {
try {
const response = await axiosInstance.post('/api/data', { /* 请求数据 */ })
console.log(response.data)
} catch (error) {
console.error(error)
}
}
return {
sendRequest
}
}
}
</script>
在上面的代码中，我们使用 reactive 函数创建了一个响应式的 axiosInstance 对象。然后，我们在 sendRequest 函数中使用该对象来发送请求，并处理响应和错误。
终止请求
为了能够终止请求，我们需要使用 CancelToken 和 cancel 方法。CancelToken 是Axios库提供的一个用于创建取消令牌的类，而 cancel 方法用于取消请求。
下面是一个示例组件，用于演示如何终止请求：
<template>
<div>
<button @click="sendRequest">发送请求</button>
<button @click="cancelRequest">取消请求</button>
</div>
</template>
<script>
import { reactive } from 'vue'
import axios from 'axios'
export default {
setup() {
const axiosInstance = reactive(axios.create())
const source = axiosInstance.CancelToken.source()
const sendRequest = async () => {
try {
const response = await axiosInstance.get('/api/data', { cancelToken: source.token })
console.log(response.data)
} catch (error) {
console.error(error)
}
}
const cancelRequest = () => {
source.cancel('请求已取消')
}
return {
sendRequest,
cancelRequest
}
}
}
</script>
在上面的代码中，我们通过调用 axios.create() 创建了一个新的 axiosInstance 对象，并使用 source 对象创建了一个取消令牌。然后，我们在发送请求时将取消令牌传递给 cancelToken 选项。最后，我们可以通过调用 cancelRequest 函数来取消请求，该函数将调用 `source.cancel
