axios基本使用

最新推荐文章于 2024-03-23 17:27:05 发布

zhou-boy

最新推荐文章于 2024-03-23 17:27:05 发布

阅读量497

点赞数 2

分类专栏：操作笔记

本文链接：https://blog.csdn.net/qq_43632167/article/details/109712976

版权

操作笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1：axios是一个功能强大的网络请求库

2：导包

<!--axios的在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3：请求方法

get请求

axios.get(地址).then(function(response){},function(err){});
//地址就是文档提供的接口地址
//response 指服务器响应的内容  err是返回的错误的信息
//如果需要传递参数，在地址后面接上  使用?分隔 key=value&key2=value2
axios.get("请求地址?key=value & key2=value2").then(function(response){},function(err){});

post请求

axios.post("请求地址",{key=value,key2=value2}).then(function(response){},function(err){});
//key由接口文档提供，value是具体要传递的数据

4：接口（百度查找）

在这里插入图片描述

5：例子

<head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <input type="button" value="get请求方法" class="get">
    <input type="button" value="post请求方法" class="post">
    <script>
    /*
    	接口1：随机笑话
    	请求地址：https://autumnfish.cn/api/joke/list
    	请求方法：get
    	请求参数：num（笑话条数，数字）
    	响应内容：随机笑话
    */
        //通过document.querySelector(".get")获取到class为get的按钮
        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)
            })
        }
     /*
    	接口2：用户注册
    	请求地址：https://autumnfish.cn/api/user/reg
    	请求方法：post
    	请求参数：username（用户名，字符串）
    	响应内容：注册成功或失败
    */
        document.querySelectot(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"}).then(function(response){
                console.log(response);//打印结果在下方
            },function(err){
                console.log("错误信息："+err)
            })
        }
    </script>
</body>

get方法 console.log(response);打印出得结果，我们需要就是data里面的数据

在这里插入图片描述

post方法 console.log(response);打印出得结果，我们需要就是data里面的数据

C-1605458369351)]

post方法 console.log(response);打印出得结果，我们需要就是data里面的数据

在这里插入图片描述

zhou-boy

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
axios基本使用

1：axios是一个功能强大的网络请求库2：导包<script src="https://unpkg.com/axios/dist/axios.min.js"></script>3：请求方法get请求axios.get(地址).then(function(response){},function(err){});//地址就是文档提供的接口地址//response 指服务器响应的内容 err是返回的错误的信息//如果需
复制链接

扫一扫