Vue学习笔记(二)网络应用

1.axios简介

axios是一个功能强大的网络请求库
GET请求格式:axios.get(url?key=value&key2=value2).then(function(response){},function(err){})
POST请求格式:axios.post(url,参数对象).then(function(response){},function(err){})
导入:
示例:

<script>
    document.querySelector(".get").onclick = function(){
        axios.get("https://autumnfish.cn/api/joke/list?num=6").then(
            function(response){
                console.log(response);
            },
            function(err){
                console.error(err);
            }
        )
    }
    document.querySelector(".post").onclick = function(){
        axios.post("https://autumnfish.cn/api/user/reg",{username:"zijeak"}).then(
            function(response){
                console.log(response);
            },
            function(err){
                console.error(err);
            }
        )
    }
script>

2. axois与Vue结合

注意,axios回调函数中的this已经改变,无法访问到data中的数据。通常的做法是,在进入回调函数作用域之前将this保存起来,回调函数中使用保存好的this即可。

<body>
    <div id="app">
        <input type="button" value="获取笑话" v-on:click="getJoke">
        <p>{{joke}}p>
    div>
    
body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            joke:"这是一个笑话"
        },
        methods:{
            getJoke:function(){
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then(
                    function(response){
                        console.log(response);
                        that.joke = response.data;
                    },
                    function(err){
                        console.error(err);
                    }
                )
            }
        },
    })
script>

你可能感兴趣的:(前端)