欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue小白教程-5 网络应用——axios发送请求

程序员文章站 2024-02-16 10:42:10
...

因为几乎没有纯本地应用了,都要与网络数据交互,所以网络应用非常重要。

1.axios

        它是一个网络请求库,功能是发送请求,内部为ajax,封装让使用更便捷,与其它框架或者库结合非常方便。

        使用方法:

                 1)导入

                 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 导包并会自动注册全局对象,这样在有网的情况下即可使用。

                 2)请求

                 有get和post两种方法

                 axios.get("地址?查询字符串").then(function(response){},function(err){})

                 axios.post[地址,查询字符串]. then(function(response){},function(err){})

查询字符串格式:key1=value1&key2=value2

                 3)访问接口

                 接口放到地址那里

                 tips:注意保持联网状态呀,这是网络应用不是本地应用。

 

 

下面是一个分别使用get和post发送请求的例子

两个接口分别为:https://autumnfish.cn/api/joke/list

                        https://autumnfish.cn/api/user/reg

 

代码如下:

<!DOCTYPE html>

<html lang ="en">

<head>

    <meta charset="UFT-8">

    <meta name = "viewport" comtent ="width=device-width,initial-scale=1.0" >

    <meta http-equiv ="X-UA-Compatible" Content = "ie=edge">

    <title>axios</title>

</head>



<body>

    <input type="button" value="get请求" class="get">

    <input type="button" value="post请求" class="post">



    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

    <script>

        document.querySelector(".get").onclick = function(){

            axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){

                console.log(response);

            },function(err){

                console.log(err);

            })

        }



        document.querySelector(".post").onclick = function(){

            axios.post("https://autumnfish.cn/api/user/reg",{username:"西兰花鸡蛋3呃4e西兰花"}).then(function(response){

                console.log(response);

            },function(err){

                console.log(err);

            })

        }

    </script>

        

</body>

</html>

 

vue小白教程-5 网络应用——axios发送请求

vue小白教程-5 网络应用——axios发送请求