安装 Axios-你得在-拦截器会在请求发送之前和接收到响应之后被调用
作者：编程小白 |
发布时间：2025-06-20 |
一、安装 Axios
首先，你得在 Vue CLI 项目里装上 Axios。用 npm 或 yarn 就行了，命令如下：
```bash
npm install axios
或者
yarn add axios
```
装好了，Axios 就能在你的项目里用了。
二、在项目中引入 Axios
然后在项目的主文件里（比如 `main.js`），把 Axios 引进来，还做点基础配置：
```javascript
import axios from 'axios';
// 设置一些默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 1000;
// 将 Axios 挂载到 Vue 原型上，这样任何组件都可以直接使用它
Vue.prototype.$http = axios;
```
这样搞的好处是，你在任何组件里都能直接用 `this.$http` 访问 Axios，不用每次都单独引。
三、创建 Axios 实例
我们还可以创建一个 Axios 实例，设置一些默认配置，比如基础 URL 和请求超时：
```javascript
const http = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000
});
```
四、在组件中使用 Axios
在具体的 Vue 组件里，你可以用 `this.$http` 来发送 HTTP 请求：
```javascript
export default {
methods: {
async fetchUsers() {
try {
const response = await this.$http.get('/users');
this.users = response.data;
} catch (error) {
console.error('Error fetching users:', error);
}
}
},
created() {
this.fetchUsers();
}
}
```
在这个例子中，我们在组件的 `created` 生命周期钩子中调用了 `fetchUsers` 方法，它通过 Axios 获取用户列表并将其存储在组件的 `users` 数据属性中。
五、总结
总的来说，用 Vue CLI 和 Axios 的过程是这样的：1、安装 Axios；2、在项目中引入 Axios 并挂载到 Vue 原型上；3、创建 Axios 实例并设置默认配置和拦截器；4、在组件中使用 Axios 发送 HTTP 请求。这么一搞，你就能在 Vue 项目里轻松地集成和使用 Axios 来进行数据请求了。
FAQs
1. 如何在 Vue CLI 中安装并使用 Axios？
Axios 是一个基于 Promise 的 HTTP 客户端，用起来很简单。按以下步骤操作：
- 步骤一：安装 Axios
打开终端，进入项目目录，执行以下命令：
```bash
npm install axios
或者
yarn add axios
```
- 步骤二：在 Vue 组件中使用 Axios
在需要发送 HTTP 请求的 Vue 组件中，首先导入 Axios：
```javascript
import axios from 'axios';
```
然后，你可以在组件的方法中使用 Axios 发送 HTTP 请求。比如：
```javascript
methods: {
async fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
}
},
created() {
this.fetchData();
}
```
2. 如何在 Vue CLI 中配置 Axios 的全局默认值？
你可以在 Vue CLI 中配置 Axios 的全局默认值，这样每个请求都会自动包含一些参数或头部信息：
- 步骤一：创建一个 Axios 实例
在项目的根目录中，创建一个 JavaScript 文件（比如 `http.js`），并添加以下代码：
```javascript
import axios from 'axios';
const http = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {
'Content-Type': 'application/json'
}
});
export default http;
```
- 步骤二：在 Vue 项目中使用 Axios 实例
在需要发送 HTTP 请求的 Vue 组件中，导入刚刚创建的 Axios 实例：
```javascript
import http from './http.js';
```
然后，你可以在组件的方法中使用这个实例来发送 HTTP 请求。
3. 如何在 Vue CLI 中处理 Axios 的请求和响应拦截？
Axios 提供了请求和响应拦截器，允许你在发送请求之前和接收响应之后进行处理：
- 步骤一：创建一个 Axios 实例
在项目的根目录中，创建一个 JavaScript 文件（比如 `http.js`），并添加以下代码：
```javascript
import axios from 'axios';
const http = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000
});
// 请求拦截器
http.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 响应拦截器
http.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
export default http;
```
- 步骤二：在 Vue 项目中使用 Axios 实例
在需要发送 HTTP 请求的 Vue 组件中，导入刚刚创建的 Axios 实例：
```javascript
import http from './http.js';
```
然后，你可以在组件的方法中使用这个实例来发送 HTTP 请求。拦截器会在请求发送之前和接收到响应之后被调用。