Axios

Axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API [JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF (跨站请求伪造)

由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{info.name}}</h1>
    <h1>{{info.address.street}}</h1>
    <a v-bind:href="info.url">你好</a>
    <li v-for="a in info.links">{{a.name}}</li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        /**
         * data: vue属性
         * data(): 接收收据
        * */
        data() {
            return {
                //请求的返回参数，必须和data.json数据格式一一对应吗？
                info: {
                    name: null,
                    address: {
                      street: null
                    },
                    url: null,
                    links: null
                }
            }
        },
        //钩子函数
        mounted() {
            axios.get("../data.json").then(res => (this.info = res.data));
        }
    });
</script>
</body>
</html>
posted @ 2022-01-12 09:27  jpy  阅读(48)  评论(0)    收藏  举报