Vue 发送 Axios 请求
Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中发送 HTTP 请求。Vue 是一个流行的 JavaScript 框架，可以帮助开发者构建用户界面。在 Vue 中，我们可以轻松地发送 Ajax 请求并处理响应。本文将介绍如何在 Vue 中使用 Axios 发送请求，并提供一些示例代码。
什么是 Axios
Axios 是一个基于 Promise 的 JavaScript HTTP 客户端库，它可以在浏览器和 Node.js 中发送 HTTP 请求。它提供了一种简洁而强大的方式来与 API 进行通信，并支持请求和响应的拦截、错误处理、取消请求等功能。Axios 还可以与许多常见的第三方库集成，如 Vue、React 和 Angular。
安装 Axios
在开始使用 Axios 之前，我们需要先安装它。可以通过 npm 或者 yarn 将 Axios 安装到我们的项目中。在终端中执行以下命令：
npm install axios
或者
yarn add axios
安装完成后，我们可以使用 import 或者 require 将 Axios 引入我们的代码中。
在 Vue 中使用 Axios
在 Vue 中使用 Axios 非常简单。首先，我们需要在组件中引入 Axios，然后使用 Axios 发送请求并处理响应。
引入 Axios
在需要发送请求的组件中，我们可以使用 import 或者 require 引入 Axios。例如，在 Vue 单文件组件中，可以在 script 标签中添加以下代码：
import axios from 'axios';
发送 GET 请求
发送 GET 请求非常简单，只需要使用 Axios 的 get 方法，并传入请求的 URL。以下是一个示例：
axios.get('/api/users')
.then(function (response) {
// 处理响应
console.log(response.data);
})
.catch(function (error) {
// 处理错误
console.log(error);
});
在上面的示例中，我们发送了一个 GET 请求到 /api/users 接口，并使用 .then 处理成功的响应，使用 .catch 处理错误。
发送 POST 请求
发送 POST 请求也非常简单，只需要使用 Axios 的 post 方法，并传入请求的 URL 和要发送的数据。以下是一个示例：
axios.post('/api/users', {
firstName: 'John',
lastName: 'Doe'
})
.then(function (response) {
// 处理响应
console.log(response.data);
})
.catch(function (error) {
// 处理错误
console.log(error);
});
在上面的示例中，我们发送了一个 POST 请求到 /api/users 接口，并传递了一个包含 firstName 和 lastName 属性的对象作为请求的数据。
请求拦截和响应拦截
Axios 提供了请求拦截和响应拦截的功能，可以在发送请求之前和接收到响应之后对请求和响应进行处理。
请求拦截
请求拦截可以用于在发送请求之前对请求进行处理，例如添加请求头、设置身份验证信息等。我们可以使用 Axios 的 interceptors 对象添加请求拦截器。以下是一个示例：
axios.interceptors.request.use(function (config) {
// 在发送请求之前对请求进行处理
config.headers.Authorization = 'Bearer ' + getToken();
return config;
}, function (error) {
// 处理错误
return Promise.reject(error);
});
在上面的示例中，我们使用 axios.interceptors.request.use 方法添加了一个请求拦截器。在这个拦截器中，我们可以修改请求的配置对象，并返回修改后的配置。
响应拦截
响应拦截可以用于在接收到响应之后对响应进行处理，例如解析响应数据、处理错误等。我们可以使用 Axios 的 interceptors 对象添加响应拦截器。以下是一个示例：
axios.interceptors.response.use(function (response) {
// 在接收到响应之后对响应进行处理
return response.data;
}, function (error) {
// 处理错误
return Promise.reject(error);
});
