本文实例讲述了Vue学习之axios的使用方法。分享给大家供大家参考，具体如下：
Axios 是一个用于实现网络数据请求的JavaScript库，可以用在网页和 node.js 中，用于创建 XMLHttpRequests，vue官方支持使用axios代替vue–resourse来实现网络数据请求。
使用前需要在你的项目中安装axios，例如通过npm安装库：
npm install --save axios
接着在项目中引入axios：
import axios from 'axios'
1、get请求
直接使用axios的全局变量来调用get方法，get中第一个参数传递url，第二
Vue.js作为一个流行的前端框架，其在处理数据交互时通常依赖于第三方库，如axios。axios是一个基于Promise的HTTP库，可以方便地在浏览器和Node.js环境中进行网络请求。本文将详细解析Vue中axios的使用方法。
使用axios之前，需要在项目中安装它。通过npm（Node Package Manager）可以轻松完成此步骤：
```bash
npm install --save axios
```
安装完成后，可以在项目中引入axios库：
```javascript
import axios from 'axios'
```
1. **GET请求**
GET请求是最常见的数据获取方式。使用axios的全局变量`axios`调用`get`方法，第一个参数是URL，第二个参数是配置对象，可以包含`params`来添加查询参数，以及设置`headers`等。返回的是一个Promise，可以通过`.then`处理成功响应，`.catch`处理错误：
```javascript
axios.get('data/zodiac.json', {
params: { id: "101" },
headers: { token: "axios" }
}).then(res => {
this.msg = res.data;
}).catch(error => {
console.log(error);
});
```
2. **POST请求**
POST请求用于向服务器发送数据。调用`post`方法，第一个参数是URL，第二个参数是发送的数据，第三个参数是配置对象。POST请求通常将数据放在第二个参数中：
```javascript
axPost() {
axios.post('./data/test.php', { // url
userId: '105'
}, { // option
headers: { token: "axPost" }
}).then(res => {
this.msg = res.data;
}).catch(err => {
this.msg = err;
});
}
```
3. **HTTP通用方法**
axios还支持直接使用HTTP方法，如`put`, `delete`, `patch`等。这允许我们灵活地处理各种HTTP请求。例如，发送一个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;
});
```
4. **拦截器**
axios提供拦截器功能，可以在请求发送前和响应返回后执行自定义逻辑。`request.use`用于请求拦截，`response.use`用于响应拦截：
```javascript
axios.interceptors.request.use(config => {
console.log("axios请求");
return config;
});
axios.interceptors.response.use(res => {
console.log("axios回调");
return res;
});
```
拦截器在实际应用中非常有用，例如可以统一处理请求前的认证逻辑或请求后的错误提示。
总结来说，axios为Vue.js提供了强大的网络请求能力，无论是简单的GET请求还是复杂的POST请求，或者是其他HTTP方法，都可以轻松应对。拦截器则进一步增强了其灵活性，使得在请求生命周期中的特定阶段可以进行自定义处理。熟悉并熟练运用axios，将极大地提升Vue项目的数据处理效率。
