axios02-其他使用方式(推荐)

最新推荐文章于 2024-11-16 12:09:44 发布

原创最新推荐文章于 2024-11-16 12:09:44 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js #axios #vue

Web前端开发专栏收录该内容

23 篇文章

订阅专栏

本文深入解析Axios库的三种使用方式，包括GET和POST请求的具体实现，以及如何通过Promise技术处理异步操作结果。文章提供了实例代码，演示了如何在网页中使用按钮触发不同类型的HTTP请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐这种方式原因： 和以前的$.ajax()非常类似

不同点：使用promise技术处理异步操作结果

axios({
    url:'请求路径',
    method:'请求方式',
    data:{ post请求参数 },
    params:{ get请求参数 }
}).then(res=>{
    //成功回调
    //console.log(res)
});

/*
1.学习目标介绍 ： axios其他使用方式
2.学习路线 ：
    (1)复习上一小节介绍的两种方式
        axios.get().then()
        axios.post().then()
    (2)介绍第三种使用方式
        axios({
            url:'请求路径',
            method:'请求方式',
            data:{ post请求参数 },
            params:{ get请求参数 }
        }).then(res=>{
            //成功回调
            //console.log(res)
        });
*/

<!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>Document</title>
</head>

<body>
    <button id="btn1">基本使用</button>
    <button id="btn2">点我发送get请求</button>
    <button id="btn3">点我发送post请求</button>

    <!-- 导入axios -->
    <script src="./axios.js"></script>
    <script>
        /*
        1.学习目标介绍 ： axios其他使用方式
        2.学习路线 ：
            (1)复习上一小节介绍的两种方式
                axios.get().then()
                axios.post().then()
            (2)介绍第三种使用方式
                axios({
                    url:'请求路径',
                    method:'请求方式',
                    data:{ post请求参数 },
                    params:{ get请求参数 }
                }).then(res=>{
                    //成功回调
                    //console.log(res)
                });
        */

        //基本使用
        btn1.onclick = function () {
            axios({
                url: 'https://autumnfish.cn/api/joke',
                method: 'get',
            }).then(res => {
                console.log(res);
            })
        };

        //get请求
        btn2.onclick = function () {
            /* 
            细节： 如果get参数很少，可以使用ES6模板字符串直接在url拼接
            如果get参数很多，建议写在params中
            */
            var num = 10;
            axios({
                url: `https://autumnfish.cn/api/joke/list?num=${num}`,
                method: 'get',
                // params:{
                //     num:10
                // }
            }).then(res => {
                console.log(res);
            })
        };

        //post请求
        btn3.onclick = function () {
            axios({
                url: 'http://ttapi.research.itcast.cn/mp/v1_0/authorizations',
                method: 'post',
                data: {
                    mobile: '18801185985',
                    code: '246810'
                }
            }).then(res => {
                console.log(res);
            })
        };
    </script>
</body>

</html>