Vue.js 是一款流行的前端框架，而axios则是一个广泛使用的JavaScript库，主要用于发起HTTP请求。在Vue项目中，axios常被用来获取和发送数据到服务器。本文将深入介绍如何在Vue中使用axios，包括GET和POST请求，以及使用HTTP拦截器进行预处理。
要在项目中使用axios，你需要通过npm安装它：
```bash
npm install --save axios
```
安装完成后，可以通过import语句引入axios库：
```javascript
import axios from 'axios'
```
### GET请求
GET请求是最常见的数据获取方式。使用axios发起GET请求，可以这样做：
```javascript
axios.get('data/zodiac.json', {
params: {
id: "101"
},
headers: {
token: "axios"
}
})
.then(res => {
this.msg = res.data;
})
.catch(error => {
console.log(error);
})
```
这里的`params`对象用于添加URL查询参数，`headers`则用于设置HTTP头。
### POST请求
POST请求用于向服务器发送数据。使用axios发起POST请求，代码如下：
```javascript
axios.post('./data/test.php', { // url
userId: '105' // 发送的数据
}, { // option选项
headers: {
token: "axPost"
}
})
.then(res => { // 接收结果
this.msg = res.data;
})
.catch(err => { // 处理错误
this.msg = err;
})
```
POST请求的第二个参数是你要发送的数据，而GET请求中这些数据会放在配置对象的`params`里。
### HTTP通用请求
除了GET和POST，axios还支持其他HTTP方法，如PUT、DELETE等。你可以直接使用一个包含所有选项的对象来发起请求，例如发送一个POST请求：
```javascript
axios({
url: "http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json",
method: "post",
data: {
userId: "106"
},
headers: {
token: "axHttp"
}
})
.then(res => {
this.msg = res.data;
})
```
### 拦截器
axios提供了一个强大的特性——拦截器，允许你在请求发送前或响应返回后执行额外的逻辑。例如，你可以添加请求拦截器来打印日志：
```javascript
axios.interceptors.request.use(config => {
console.log("axios请求");
return config;
});
```
同样，可以添加响应拦截器来处理返回的数据：
```javascript
axios.interceptors.response.use(res => {
console.log("axios回调");
return res;
})
```
拦截器的使用有助于统一处理请求和响应，比如验证身份、处理错误信息等。
axios为Vue.js应用提供了一种简洁、高效的网络请求方式。通过GET、POST请求，以及其他HTTP方法，你可以轻松地从服务器获取数据或发送数据。同时，利用拦截器功能，你可以增强应用程序的功能和用户体验。在实际开发中，正确理解和运用axios能显著提升开发效率和代码质量。
