axios库的学习

最新推荐文章于 2024-07-12 09:36:48 发布

梧桐aa

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量83

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_41212845/article/details/131580283

版权

一、axios介绍

功能强大的网络请求库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// 第一个回调函数在请求响应完成时触发，第二个回调函数会在请求失败后触发
       axios.get(地址).then(function(response){},function(err){}) 
       axios.post(地址,参数对象).then(function(response){},function(err){})

二、axios的基本使用

准备get接口
1）接口一：随机笑话
2）请求方法：get
3）请求地址：https://autumnfish.cn/api/joke/list
4）请求参数：num（笑话条数，数字）
5）响应内容：随机笑话

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <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")
                axios.get("https://autumnfish.cn/api/joke/list3445?num=3")
                .then(function(response){
                    console.log(response);
                },function(err){
                    console.log(err);
                })
            }
    </script>
</body>

准备post接口
1）接口二：用户注册
2）请求地址:https://autumnfish.cn/api/user/reg
3）请求方法:post
4）请求参数:username(用户名,字符串)
5）响应内容:注册成功或失败

document.querySelector('.post').onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err)
            })
        }

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="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">
    <!-- 官网提供的 axios 在线地址 -->
    <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")
                axios.get("https://autumnfish.cn/api/joke/list3445?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:"盐焗西兰花"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err)
            })
        }

    </script>
</body>

</html>