Vue Axios - 技术栈

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 使用 - 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文件下载到本地。

示例如下：

html 复制代码

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

使用axios

在按钮上绑定点击事件，在点击事件中使用axios请求json数据。

示例如下：

html 复制代码

<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>

打印获取的数据，如下：

赋值

修改事件中的处理，改为赋值并在按钮的下方循环渲染列表。

示例如下：

html 复制代码

<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