axios基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
现在Vue官方推荐的网络通信库不再是vue-resource了，推荐使用axios。所以学习了下，总结如下。
一、功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、自动转换 JSON 数据
7、客户端支持保护安全免受 XSRF 攻击
二、axios的安装方法（官方给了3种方法）
1、npm安装
$ npm install axios
2、b
Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中进行数据交互是应用程序的核心部分。过去，Vue 官方推荐使用 `vue-resource` 库来进行 HTTP 请求，但随着技术的发展，现在官方推荐使用 `axios`。`axios` 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境中工作，具有很多实用的功能。
**一、axios 功能特性**
1. **XMLHttpRequests 请求**：axios 可以在浏览器中发起 XMLHttpRequests 请求，这是与服务器进行数据交互的基础。
2. **Node.js http 请求**：在服务器端，axios 支持 Node.js 的 http 模块，允许在服务端进行数据请求。
3. **Promise API 支持**：axios 使用 Promise API，使得异步操作更易于理解和管理。
4. **请求和响应拦截器**：你可以设置请求和响应拦截器，用于在发送请求之前或收到响应之后执行自定义逻辑。
5. **数据转换**：axios 提供了转换请求数据和响应数据的机制，方便数据处理。
6. **自动转换 JSON 数据**：axios 自动将 JSON 数据转换为 JavaScript 对象，简化了数据处理。
7. **XSRF 保护**：对于浏览器环境，axios 提供了 XSRF 防御策略，增强了安全性。
**二、axios 安装**
安装 axios 可以通过以下三种方式：
1. **npm 安装**：在项目目录下运行 `npm install axios`，将 axios 添加为项目依赖。
2. **bower 安装**：如果你使用 bower 进行包管理，可以运行 `bower install axios`。
3. **CDN 引入**：可以直接在 HTML 文件中通过 CDN 链接引入，例如 `<script src="https://unpkg.com/axios/dist/axios.min.js"></script>`。
**三、使用步骤**
以 npm 安装为例，安装后在项目的 `main.js` 文件中引入并配置 axios：
1. 首先运行 `npm install axios` 安装 axios。
2. 在 `main.js` 文件中，引入 axios 并将其挂载到 Vue 的原型上，这样在所有组件中都可以使用 `$http`：
```javascript
import axios from 'axios'
Vue.prototype.$http = axios
```
**四、请求实例**
以下是一个简单的 Vue 组件示例，展示了如何使用 axios 获取数据并渲染到页面上：
```html
<template>
<div class="tabbar">
<p>首页</p>
<button v-on:click="goback">获取数据</button>
<div class="new_wrap" v-for="items in item">
<div class="newcard">
<div><p>{{items.issuer_nickname}}.</p></div>
<div>{{items.title}}</div>
<div class="pic"><img :src="items.cover"></div>
</div>
<br>
</div>
</div>
</template>
<script>
export default {
name: 'tabbar',
data() {
return {
msg: 'Welcome to Your Vue.js App',
item: []
}
},
methods: {
goback() {
console.log('hah');
this.$http.get('url') // 替换为实际的 API 接口
.then(res => {
//this.request.response = res.data;
this.item = res.data.data.item; // 将获取到的 item 数据赋值给 item 数组
console.log(res.data.data.item);
if (res.data.code === '0') {
console.log('haha');
} else {
alert('数据不存在');
}
})
.catch(err => {
alert('请求失败');
})
}
}
}
</script>
```
在这个示例中，当用户点击“获取数据”按钮时，`goback` 方法会被触发，向指定的 URL 发起 GET 请求。收到响应后，数据会被赋值给 `item` 数组，并在模板中使用 `v-for` 循环显示。
axios 提供了强大且灵活的 API，使得在 Vue 中进行 HTTP 请求变得更加简单。它不仅支持 Promise，还提供了丰富的功能，如拦截器和数据转换，是 Vue 开发者的首选工具。结合 Vue 的组件化特性，可以高效地构建数据驱动的应用程序。如果你在使用过程中遇到任何问题，可以通过官方文档（[https://github.com/axios/axios](https://github.com/axios/axios)）获得帮助。
