Vue 中 Axios 的使用和拦截器封装

## 前言

在当今时代，构建一个强大的 Web 应用程序需要处理大量的 HTTP 请求。为了简化这个过程，我们通常使用一些 JavaScript 库来帮助我们发出和处理这些请求。Axios 是一个流行的 JavaScript 库，它提供了一种简单的方法来处理 HTTP 请求。在本文中，我们将讨论 Vue 中 axios 的基本用法以及如何使用拦截器来封装它。

## axios 的基本用法

使用 axios 发出 HTTP 请求非常简单。首先，您需要在您的 Vue 项目中安装 axios。您可以使用以下命令来安装它：

npm install axios

安装完成后，您就可以在您的 Vue 组件中使用 axios。要发送一个 HTTP 请求，您可以使用 axios.get() 方法。例如，以下代码发送一个 GET 请求到 `https://example.com/api/users`：

axios.get('https://example.com/api/users')
.then((response) => {
// 处理响应
})
.catch((error) => {
// 处理错误
});

上面的代码将发出一个 GET 请求到 `https://example.com/api/users`，并将响应存储在 `response` 变量中。如果请求成功，则 `then()` 方法将被调用，并传入响应数据。如果请求失败，则 `catch()` 方法将被调用，并传入错误信息。

## 拦截器

拦截器是可以在请求和响应被发送或接收之前对它们进行修改的函数。您可以使用拦截器来添加标头、转换数据或在请求或响应发生错误时执行某些操作。

要创建一个拦截器，您可以使用 axios.interceptors.request.use() 方法或 axios.interceptors.response.use() 方法。这两个方法都接受两个参数：一个拦截器函数和一个可选的配置对象。

拦截器函数是一个函数，它接受一个请求或响应对象作为参数，并返回一个修改后的请求或响应对象。配置对象是一个可选对象，它可以用来配置拦截器。

例如，以下代码创建一个拦截器，它在每个请求中添加一个 `Authorization` 标头：

axios.interceptors.request.use((config) => {
config.headers['Authorization'] = 'Bearer my-token';

return config;
});

上面的代码将创建一个拦截器，它在每个请求中添加一个 `Authorization` 标头，值为 `Bearer my-token`。

## 在 Vue 项目中使用 axios

在 Vue 项目中使用 axios 非常简单。您可以在您的 Vue 组件中直接使用 axios。例如，以下代码发送一个 GET 请求到 `https://example.com/api/users`：

export default {
methods: {
getUsers() {
axios.get('https://example.com/api/users')
.then((response) => {
// 处理响应
})
.catch((error) => {
// 处理错误
});
}
}
};

上面的代码将创建一个 Vue 组件，它包含一个 `getUsers()` 方法。该方法发送一个 GET 请求到 `https://example.com/api/users`，并将响应存储在 `response` 变量中。如果请求成功，则 `then()` 方法将被调用，并传入响应数据。如果请求失败，则 `catch()` 方法将被调用，并传入错误信息。

## 结论

在本文中，我们讨论了 Vue 中 axios 的基本用法和如何使用拦截器来封装它。我们学习了如何使用 axios 发出 HTTP 请求、处理响应、配置请求和响应拦截器以及在 Vue 项目中使用 axios。通过阅读本文，您将能够在您的 Vue 项目中使用 axios 来简化 HTTP 请求。