Day03-02：Ajax-Axios2-概念

最新推荐文章于 2024-08-09 21:30:00 发布

我以为心都空了

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量123

点赞数 5

分类专栏： JavaWeb 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_63464979/article/details/140139414

版权

JavaWeb 专栏收录该内容

144 篇文章 0 订阅

订阅专栏

Day03-02：Ajax-Axios2-概念

1.Axios
1.介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。
2.官网：https://www.axios-http.cn/

2.Axios 是什么?
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

3.Axios入门(从then开始到最后，是成功回调函数)
1.引入Axios的js文件

 <script src="js/axios-0.18.0.js"></script>

2.使用Axios发送请求，并获取响应结果

    axios({
        method:"get",
        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
    }).then((result)=>{
        console.log(result.data);
    })

    axios({
        method:"post",
        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list",
        data:"id=1"
    }).then((result)=>{
        console.log(result.data);
    })

3.在成功回调函数当中，我们可以接收

4.Axios(推荐)
1.请求方式别名
1.axios.get(url[,config])
2.axios.delete(url[,config])
3.axios.post(url[,data[,config]])
4.axios.put(url[,data[,config]])
2.发送异步请求
1.发送GET请求

            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
                console.log(result.data);
            });

2.发送POST请求

            axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/list","id=1").then((result)=>{
                console.log(result.data);
            });

3.传递参数：
1.get请求：需要传递请求参数的话，可以直接在url的后面通过?key=value的形式来传递参数
2.post请求：而post请求的请求参数是在请求体当中传递的，那么在axios当中通过data这个属性来制定post请求所传递的请求参数

3.Axios入门(从then开始到最后，是成功回调函数)代码演示

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios2-3.Axios入门(从then开始到最后，是成功回调函数)代码演示</title>
 </head>
 <body>
    <input type="button" value="GET获取数据" οnclick="get()">
    <input type="button" value="POST获取数据" οnclick="post()">
 </body>
 <script>
    function get(){
        //通过axios发送异步请求-get
        axios({
            method: "get",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"           
        }).then((result)=>{
            console.log(result.data);
        })
    }
    function post(){
        //通过axios发送异步请求-post
        axios({
            method:"post",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/list",
            data:"id=1"
        }).then((result)=>{
            console.log(result.data);
        })

    }
 </script>
 </html>

4.Axios代码演示

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios2-4.Axios</title>
    <script src="../../Day-02/Vue/JS文件/axios-0.18.0.js"></script>
 </head>
 <body>
    <input type="button" value="get方式请求" onclick="get()">
    <input type="button" value="post方式请求" onclick="post()">
 </body>
 <script>
    function get(){
        axios.get("https://yapi.pro/mock/79237/user/exercise").then((result)=>{
            console.log(result.data);
        });
    }
    function post(){
        /* 
        由于浏览器访问的任何地址都是以get请求来访问的，而这个地址我们需要通过post请求的方式来访问，所以报了一个错，404请求失败。
    接下来复制这个地址，在vscode中把post请求的地址替换掉就可以了，这个地址是根据id来删除信息，
    所以这时候还需要传递一个参数id是多少，而在post请求中，我们要传递的参数需要在data后面指定参数，所以在下面写data："id=1"
        */
        axios.post("https://yapi.pro/mock/79237/user/exercise","id=1").then((result)=>{
            console.log(result.data);
        });
    }
 </script>
 </html>

我以为心都空了

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Day03-02：Ajax-Axios2-概念

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 2.post请求：而post请求的请求参数是在请求体当中传递的，那么在axios当中通过data这个属性来制定post请求所传递的请求参数。 1.get请求：需要传递请求参数的话，可以直接在url的后面通过?3.Axios入门(从then开始到最后，是成功回调函数)代码演示。3.Axios入门(从then开始到最后，是成功回调函数) 2.使用Axios发送请求，并获取响应结果。
复制链接

扫一扫

专栏目录