Axios

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Axios，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2339字，纯文字阅读大概需要4分钟。

内容图文

什么是Axios？

一个可以用在浏览器端和NodeJS的异步通信框架，主要作用就是实现Ajax异步通信。

官方网站：

http://www.axios-js.com

Axios 功能特点

• 从浏览器中创建XMLHttpRequests。
• 从nodejs创建Http请求。
• 支持Promise API
• 拦截请求和响应。
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF（跨站请求伪造）

代码实现-显示全部JSON数据

<div id="vue">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: '#vue',
        mounted(){  
            //链式编程：以点的方式连接语句
            axios.get('../data.json').then(Response=>(console.log(Response.data)));
        }
    });
</script>

• mounted()称为钩子函数，类似AOP，可以将一段函数横切进Vue的声明周期。
• 利用类似于Ajax的axios获取JSON数据，然后返回一个响应，响应的内容是JSON的数据。

效果呈现

{name: "恨劫", url: "http://baidu.com", page: "1", isNonProfit: "true", address: {…}, …}
address: {street: "兴发路", city: "辽宁大连", country: "中国"}
isNonProfit: "true"
links: Array(3)
0: {name: "B站", url: "https://www.bilibili.com/"}
1: {name: "4399", url: "https://www.4399.com/"}
2: {name: "百度", url: "https://www.baidu.com/"}
length: 3
__proto__: Array(0)
name: "恨劫"
page: "1"
url: "http://baidu.com"

网络抓包

由此可见：axios 实现的是Ajax的异步通信

代码实现-按照格式部分显示json

<div id="vue">
    <!--{{}}绑定后才能被vue找到-->
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <!--v-bind:绑定后才能被vue找到-->
    <a v-bind:href="info.url">点我</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: '#vue',
        data(){ //是data方法，区别与data属性
            return{
                //请求返回的参数格式，必须和JSON字符串一样，可以不写
                //return的是一个格式，并不是真正的数据
                info:{
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        mounted(){  //钩子函数，类似AOP，可以横切进vue的声明周期
            //链式编程：以点的方式连接语句
            //获取一个json文件，返回数据给info
            axios.get('../data.json').then(Response=>(this.info = Response.data));
        }
    });
</script>

• 首先通过 axios.get 请求获取json文件，将json数据返回给info。
• data() 方法会将传进来的JSON数据自定义格式后返回
  • 这里返回的参数格式必须和JSON字符串中的key名字一样。
  • 返回的是一个格式，并不是真正的数据。
• 通过对html标签的绑定，来显示json数据。

内容总结

以上是互联网集市为您收集整理的Axios全部内容，希望文章能够帮你解决Axios所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---