16.axios基本使用

<body>
    <button class="get">get请求</button><button class="post">post请求</button>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // axios 是网络请求库
        // axios必须先导入才可以使用   axios功能不仅仅是这些 还有文档传送门:http://github.com/axios/axios
        // 用axios里面的  get  请求的  书写格式

        // axios.get("要去的网络接口地址 ? key=value & key=value").then(function(response) {},function(error) {})

        // 其中 then方法 传递的第一个函数  是等内部响应完毕 成功的时候返回数据  第二个函数是  请求失败的时候返回数据
        // post请求格式  和gat差不多  只是 ? 改为 , 参数以 对象{} 的形式传递 如下:

        // axios.post("地址",{key:value,key2:value2}).then(function(response) {}, function(error) {})

        document.querySelector('.get').onclick = function() {
            axios.get("https://autumnfish.cn/api/joke/list?num=3") // 用axios里面的get请求方法
                .then(function(response) {
                    console.log(response);
                }, function(error) {
                    console.log(error);
                })
        };
        document.querySelector('.post').onclick = function() {
            axios.post("https://autumnfish.cn/api/user/reg", {
                    username: "铁板西兰花"
                })
                .then(function(response) {
                    console.log(response);
                }, function(error) {
                    console.log(error);
                })
        }
    </script>
</body>

 

posted @ 2020-12-28 22:16  闭上耳朵  阅读(81)  评论(0编辑  收藏  举报