Vue Http Axios 封装
介绍
在 Vue.js 中，我们经常需要与后端进行数据交互，发送 HTTP 请求和接收响应数据。为了更好地管理和组织这些请求，我们可以使用 Axios 来进行封装。Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。
本文将介绍如何在 Vue.js 中使用 Axios 封装 HTTP 请求，并提供代码示例。
安装 Axios
首先，我们需要在项目中安装 Axios。可以使用 npm 或 yarn 进行安装：
npm install axios
# 或者
yarn add axios
安装完成后，在项目中引入 Axios：
import axios from 'axios'
封装请求
接下来，我们可以创建一个 request.js 文件来封装我们的请求。在这个文件中，我们可以定义一些请求的公共配置，例如 API 的基本 URL、统一的请求头等。
import axios from 'axios'
const instance = axios.create({
baseURL: '
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
})
export default instance
在上面的代码中，我们使用 axios.create 创建了一个 Axios 实例，并设置了一些默认的配置。这里的 baseURL 表示我们的 API 的基本路径，timeout 表示请求的超时时间，headers 表示请求的头部信息。
我们还可以通过拦截器来对请求和响应进行处理，例如添加身份验证信息、处理错误等。在 request.js 文件中，我们可以添加这些拦截器：
import axios from 'axios'
const instance = axios.create({
baseURL: '
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
})
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// ...
return config
},
error => {
// 处理请求错误
// ...
return Promise.reject(error)
}
)
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做些什么
// ...
return response
},
error => {
// 处理响应错误
// ...
return Promise.reject(error)
}
)
export default instance
使用封装的请求
现在我们已经封装好了我们的请求，可以在 Vue 组件中使用它了。以下是一个简单的示例：
<template>
<div>
<button @click="getData">获取数据</button>
<p>{{ data }}</p>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
data() {
return {
data: ''
}
},
methods: {
async getData() {
try {
const response = await request.get('/data')
this.data = response.data
} catch (error) {
console.error(error)
// 处理错误
}
}
}
}
</script>
在上面的代码中，我们通过 import request from '@/utils/request' 导入了封装好的请求对象。然后，在 getData 方法中，我们使用 request.get('/data') 发送了一个 GET 请求，并通过 await 关键字等待响应返回。最后，将获取到的数据赋值给 data 属性，以在模板中显示出来。
流程图
接下来，我们使用流程图来描述整个请求的流程。
flowchart TD
A(发送请求) --> B{请求拦截器}
B --> C{发送请求}
C --> D{响应拦截器}
D --> E{处理响应}
E --> F(返回响应数据)
F --> G{处理数据}
G --> H(显示数据)
总结
在本文中，我们介绍了如何使用 Axios 封装 HTTP 请求。我们创建了一个 request.js 文件，在其中定义了一些公共的请求配置，并使用拦截器来处理请求和响应。然后，我们在 Vue 组件中使用封装好的请求对象来发送请求，并处理响应数据。最后，我们还使用流程图来描述整个请求的流程。
Axios 提供了很多功能强大的功能，如并发请求、
