axios简单使用

快乐江小鱼

于 2023-06-23 21:05:49 发布

阅读量475

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/dolly_baby/article/details/131354232

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

axios简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios基本使用</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke"/>
        <p>{{ joke }}</p>
    </div>
    <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 src="vue.js"></script>
    <script>
        //随机笑话
        document.querySelector(".get").onclick = function() {
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
                .then(function(res) {
                    console.log(res);
                }, function(err){
                    console.log(err);
                })
        }

        //页面加载时请求，如果调用某个方法返回值是Promise实例，则前面可以添加await
        //await只能用在被async修饰的方法中
        // axios({
        //     method: 'GET',
        //     url: 'https://autumnfish.cn/api/joke/list',
        //     //URL中的查询参数
        //     params: {
        //         num:6
        //     },
        //     //请求体参数
        //     data: {

        //     }
        // }).then(function(res){
        //     console.log(res);
        // })

        //解构赋值时使用冒号进行重命名
        // const { data:resp } = await axios({
        //     method: 'GET',
        //     url: 'https://autumnfish.cn/api/joke/list',
        //     //URL中的查询参数
        //     params: {
        //         num:6
        //     },

        // })

        //用户注册
        document.querySelector(".post").onclick = function() {
            axios.post('https://autumnfish.cn/api/user/reg', {username: "jack"})
                .then(function(res){
                    console.log(res);
                }, function(err){
                    console.log(err);
                });
        }

        var app = new Vue({
            el: '#app',
            data: {
                joke: ""
            },
            methods: {
                getJoke: function() {
                    let that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(res){
                        that.joke = res.data;
                    }, function(err){})
                }
            }
        })
    </script>
</body>
</html>