Vue Axios

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文件下载到本地。
示比方下：

1. <script src="../lib/vue.js"></script>
2. <script src="../lib/axios.min.js"></script>

复制代码

 
使用axios

在按钮上绑定点击变乱，在点击变乱中使用axios哀求json数据。
示比方下：

1. <div id="box">
2.     <button @click="handleClick">ajax-axios</button>
3. </div>
4. <script>
5.     let vm = new Vue({
6.         el:"#box",
7.         data:{
8.             datalist:[]
9.         },
10.         methods:{
11.             handleClick() {
12.                 axios.get("./json/ebook.json").then(res => {
13.                     console.log(res.data)
14.                 })
15.             }
16.         }
17.     })
18. </script>

复制代码

打印获取的数据，如下：

赋值

修改变乱中的处理，改为赋值并在按钮的下方循环渲染列表。
示比方下：

1. <div id="box">
2.     <button @click="handleClick">ajax-axios</button>
3.     <ul>
4.         <li v-for="item in datalist">
5.             <div>
6.                 <img :src="item.cover" alt="" width="30px">{{item.title}}
7.             </div>
8.         </li>
9.     </ul>
10. </div>
11. <script>
12.     let vm = new Vue({
13.         el:"#box",
14.         data:{
15.             datalist:[]
16.         },
17.         methods:{
18.             handleClick() {
19.                 axios.get("./json/ebook.json").then(res => {
20.                     this.datalist = res.data.data.data
21.                 })
22.             }
23.         }
24.     })
25. </script>

复制代码

 效果：

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - Axios

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。