Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - Axios
目录
Axios
请求方法
功能
安装
使用CDN
引入axios
使用axios
赋值
总结
Axios
Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。
axios是第三方的东西，需要下载和引入。
请求方法
axios.get()
axios.post()
axios.put()
axios.delete()
功能
从浏览器中创建 XMLHttpRequest
从 node.js 中创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止 XSRF 攻击
安装
使用命令npm i axios，官网如下图：
使用CDN
如果不安装的话，也可以使用CDN方式直接引用使用。
如下图：
引入axios
把CDN网址的js文件下载到本地。
示例如下：
<script src="../lib/vue.js"></script>
<script src="../lib/axios.min.js"></script>
使用axios
在按钮上绑定点击事件，在点击事件中使用axios请求json数据。
示例如下：
<div id="box"><button @click="handleClick">ajax-axios</button>
</div>
<script>let vm = new Vue({el:"#box",data:{datalist:[]},methods:{handleClick() {axios.get("./json/ebook.json").then(res => {console.log(res.data)})}}})
</script>打印获取的数据，如下：
赋值
修改事件中的处理，改为赋值并在按钮的下方循环渲染列表。
示例如下：
<div id="box"><button @click="handleClick">ajax-axios</button><ul><li v-for="item in datalist"><div><img :src="item.cover" alt="" width="30px">{{item.title}}</div></li></ul>
</div>
<script>let vm = new Vue({el:"#box",data:{datalist:[]},methods:{handleClick() {axios.get("./json/ebook.json").then(res => {this.datalist = res.data.data.data})}}})
</script>效果：
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - Axios